Skip to content

amitgarg/gulp-pract

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

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

No packages published