Complete guide to kickstart a new project with NPM-Gulp

0 votes
414 views
added Oct 31, 2017 in Gulp by anonymous
edited Jul 11, 2019 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. Or you can learn the sample gulpfile.js file here
    • |- 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
      var
        // 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 

  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

 

 

1 Response

0 votes
responded Jul 11, 2019 by LC Marshal Captain (25,790 points)
  1. After npm init
  2. If you work too often with gulp, best practice to duplicate the dependency of your existing package.json to new package.json  completely, unless you need some specific dependencies for your project.
  3. npm i
  4. Else, if you've npm i earlier, remove the node_modules first and reinstall npm with 
    rm -rf node_modules
    npm install

     

Example of package.json as follows:

{
  "name": "creditpage",
  "version": "1.0.0",
  "description": "build for credit page",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Lc",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "css-mqpacker": "^6.0.1",
    "cssnano": "^3.10.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-deporder": "^1.1.0",
    "gulp-htmlclean": "^2.7.15",
    "gulp-imagemin": "^3.4.0",
    "gulp-newer": "^1.3.0",
    "gulp-postcss": "^7.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-strip-debug": "^1.1.0",
    "gulp-uglify": "^3.0.0",
    "postcss-assets": "^5.0.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7"
  }
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...