Complete guide to kickstart a new project with NPM-Gulp

Question

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

 

 

Answer 1

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"
  }
}