Are you first timer at Why not join us and start exchange your programming knowledge with everyone. Register today!

Complete guide to kickstart a new project with NPM-Gulp

0 votes
added Oct 31, 2017 in Gulp by theoh_lee Corporal (810 points)
recategorized Nov 16, 2017 by LC Marshal
  1. cd project
  2. npm init
  3. npm install gulp -g
  4. npm install gulp --save-dev   Install gulp locally
  5. Create 'gulpfile.js', src & build directory to base directory. Example as shown below.
    • |- src/
            |- fonts/
            |- images/ 
            |- html
            |- js/ 
            |- scss/
        |- build/
            |- fonts/
            |- images/
            |- html 
            |- js/ 
            |- scss/
        |- gulpfile.js
        |- node_modules/
        |- package.json

  6. In this scenario, we use src as working path, whereas build as compiled path
  7. Open gulpfile.js and add the the following basic kick off gulp configuration codes 
    • // Gulp.js configuration
        // modules
        gulp = require('gulp'),

        // development mode?
        devBuild = (process.env.NODE_ENV !== 'production'),

        // folders
        folder = {
          src: 'src/',
          build: 'build/'

  8. Install common dependencies for project kickoff
  9. Image Task: npm install gulp-newer gulp-imagemin --save-dev Compress image and copy to build dir

  10. HTML Task: npm install gulp-htmlclean --save-dev Minify html codes - remove whitespace​

  11. Please add referencing of package dependencies under modules on top of the file

    •  var
        // modules
        gulp = require('gulp'),
        newer = require('gulp-newer'),
        imagemin = require('gulp-imagemin'),

  12. JavaScript Task: npm install gulp-deporder gulp-concat gulp-strip-debug gulp-uglify --save-dev
    • gulp-deporder - ensure dependencies are loaded first 

    • gulp-concat - concatenate all script files into a single main.js

    • gulp-strip-debug - remove all console and debugging statements

    • gulp-uglify - minimize code

  13. CSS Task: npm install gulp-sass gulp-postcss postcss-assets autoprefixer css-mqpacker cssnano --save-dev
    • postcss-assets to manage assets. This allows us to use properties such as background: resolve('image.png'); to resolve file paths or background: inline('image.png'); to inline data-encoded images.

    • css-mqpacker - pack multiple references to the same CSS media query into a single rule.

    • cssnano - minify CSS when running on prod mode

    • autoprefixer - add vendor prefixes to CSS properties.

  14. Under main.scss , add the following codes that do the importing; e.g
    • //fonts
      @import "fonts/ionicons/ionicons";

      // global
      @import "global/fonts";
      @import "global/general";

      // components
      @import "component/header";
      @import "component/footer";
      body {
        background: $body_bg;
        font-family: $font_default;

    • The example of directory
      |- src/
            |- fonts/
            |- images/
            |- html
            |- js/
            |- scss/
            |- main.scss
            |- general/
            |- pages/
            |- fonts/  
                        |- poppins.scss
            |- ionicons.scss
            |- fa.scss
            |- component/

  15. To add minify css version, comment it if you already using cssnano .pipe(concat('style.min.css'))

  16. You can always change the build folder name to something else, e.g 'dist'

    • // folders
        folder = {
          src: 'src/',
          build: 'dist/'

  17. To compiled after changes: gulp run 
  18. To watch changes and run constantly: gulp watch

  19. To gulp only css: gulp css

  20. Add .gitignore node_modules if you want to push it to repository

    1. Open text editor i.e sublime text

    2. Add the folder you want to ignore by git

    3. For e.g node_modules

    4. Save the file as .gitignore

    5. Commit and push



Please log in or register to response this reference. - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.