-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.yml
76 lines (55 loc) · 2.95 KB
/
README.yml
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
Globbing Patterns
Most workflows with Gulp tend to only require 4 different globbing patterns:
*.scss
The * pattern is a wildcard that matches any pattern in the current directory. In this case, we’re matching any files ending with .scss in the root folder (project).
**/*.scss
This is a more extreme version of the * pattern that matches any file ending with .scss in the root folder and any child directories.
!not-me.scss
The ! indicates that Gulp should exclude the pattern from its matches, which is useful if you had to exclude a file from a matched pattern. In this case, not-me.scss would be excluded from the match.
*.+(scss|sass)
The plus + and parentheses () allows Gulp to match multiple patterns, with different patterns separated by the pipe | character. In this case, Gulp will match any file ending with .scss or .sass in the root folder.
Till now the gulp-sass task maintains the folder structure of the files from the src to destination.
Watching Sass files for changes
watch method
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
Optimizing CSS and JavaScript files
Concatenation
using gulp plugin gulp-useref
$ npm install gulp-useref --save-dev
<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
<type> can either be js, css, or remove.
If you set type to remove, Gulp will remove the entire build block without generating a file.
<path> here refers to the target path of the generated file.
files will be cancatenated in the same order they appear in the build block
Minification
JS
using gulp-uglify and gulp-if(conditional)
$ npm install gulp-uglify --save-dev
just add the plugin in the pipeline of concatenation task
CSS
using gulp-cssnano and gulp-if
$ npm install gulp-cssnano --save-dev
similarly add in the pipeline
Copying Fonts to Dist
Since font files are already optimized, there's nothing more we need to do. All we have to do is to copy the fonts into dist.
Cleaning up generated files automatically
Since we're generating files automatically, we'll want to make sure that files that are no longer used don't remain anywhere without us knowing.
npm install del --save-dev
Combining Gulp tasks
Grouping
gulp.task('task-name',
['tasks','to','be','executed','before','this'],function(){}
});
All the tasks in the list will be started in parallel
Sequencing
use plugin run-sequence
$ npm install run-sequence --save-dev
gulp.task('task-name', function(callback) {
runSequence('task-one', 'task-two', 'task-three', callback);
});
you can run some tasks simultaneously as well
gulp.task('task-name', function(callback) {
runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});