-
Notifications
You must be signed in to change notification settings - Fork 0
amitgarg/gulp-pract
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
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); });
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published