forked from cpetta/sandpaper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.txt
96 lines (81 loc) · 3.15 KB
/
README.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
To run a gulp task, run cmd or powershell, and navigate to the folder that this file is located in. ( using cd [foldername] )
Alternatively, on windows, you can hold shift, and right click in the blank space of the folder that contains this file.
The context menu should have the option [open command window here]
Installation
1. run setup.bat (double click on.)
Basic Workflow.
1. develop a website.
2. copy the website and all files/folders into the dev folder
3. Open command prompt in this location using the steps outlined above.
4. Run one of the tasks outlined below by typing "gulp [taskname]" replacing [taskname] with the task you want to run.
Workflow for Development.
1. Create and edit all your .html, .css, and .js files in the dev folder
a. They can be in any number of sub-folders and it can be organized in any way.
2. When you begin editing code, run the [gulp sync]
3. On each save [gulp] should run and update your page in the browser.
Workflow for Release.
1. Create and edit all your .html, .css, and .js files in the dev folder
a. They can be in any number of sub-folders and it can be organized in any way.
2. When your done editing your code, run [gulp rel]
3. Upload the files from the rel folder to your webserver.
Using this gulpfile with other projects.
1. Copy the following files into your new project.
a. gulpfile.js
b. setup.bat
c. stylelint.config.js
d. tslint.json
2. create a dev folder
3. run setup.bat
This gulpfile has the following tasks available.
1. default
2. rel
3. lint
4. clean
5. watch
6. watchlint
7. sync
1. gulp (default)
This task
Sets the sourcemap flag
Processes CSS
Processes HTML
Processes Javascript
Processes Typescript
Optamizes Images (.svg, .png, .jpg, .gif)
Copies any remaining files to the 'stage' folder
Lints HTML
Lints CSS
Lints Javascript
Lints Typescript
2. gulp rel
This task
Deletes the rel folder
Sets the release flag
Processes CSS
Processes HTML
Processes Javascript
Processes Typescript
Optamizes Images (.svg, .png, .jpg, .gif)
Copies any remaining files to the 'rel' folder
Lints HTML
Lints CSS
Lints Javascript
Lints Typescript
3. gulp lint
this task
Lints HTML
Lints CSS
Lints Javascript
Lints Typescript
4. gulp clean
this task deletes the 'stage' folder.
5. gulp watch
This task will run indefinately until the command promt is ether closed or the users presses ctrl + c.
when a file is changed between the 'dev' folder and the 'stage' folder, it will process it.
for instance if I make a change to a css file, and hit save, that change will be carried over to the 'stage' folder.
6. gulp watchlint
this task will watch for files changing just like 'gulp watch', but instead of processing them, it will output a lint report.
7. gulp sync
this task is the same as gulp watch, but in addition it runs a webserver on port 3000.
you can open up your website in the browser, if a file in the 'dev' folder changes, it will be processed, and the browser will reload or update with the change.
additionally, if multiple browsers/devices load your webpage, scrolling, clicking, and typing are all duplicated across instances.