Gulp | Node Package Manager (NPM)

Gulp - Simple automate toolkit to grab files and compile CSS, SCSS, JavaScript or framework like non-standard JavaScript for browser. 

Node Package Manager (NPM) - The source code of Gulp and other relative files and frameworks repository that need to use.
package.json file - Keep track of all files. DNA explanation of a project.
Download and install - https://nodejs.org/en/

1. Install Node Package Manager (NPM)
1. After install check in CMD: node-v...-x.... from https://nodejs.org/en/
2. Check in Command Prompt 
1. node -v for gulp
2. npm -v for Node package Manager
2. Create package.json file
1. Create project folder and suppose named it 'Gulp'.
2. In Command Prompt (D:\xapmm\htdocs\gulp>)
1. npm init
2. package name-> enter package name, basically folder name should be package name but you can put only enter (Space is not allowed).
3. Fill up link, description, version.
4. Entry point should be default value like index.js
5. Test command, git repository, keyword, author, license (Simply press enter like blank) .
6. Is this OK? Press enter.
7. package.json file created in Gulp file. 
3. Install Gulp
1. In Command Prompt inside the "Gulp folder"
1. npm install --save-dev gulp -- Install gulp folder and update package.json file.
4. After Install Gulp
1. We get 'node_modules' folder and 'package-lock.json' file.
2. Folder 'node_modules' is used only for the developers. In the local server 'node_moludes' folder is required when some changes going on the project. It's never uploaded on the remote server.
3. But  'package-lock.json' file is required only when upload into the server, but folder 'node_modules' not required for remote server.
5. Gulp/NPM version | Update
1. E:\xampp\htdocs\Gulp>npm outdated
2. Empty means all are updated. 
6. Only package.json file | Developer have only package.json file
1. E:\xampp\htdocs\Gulp>npm install
2. Inside package.json file we newly find "dependencies": {    "gulp": "^4.0.2"  }.
3. Our custom gulp js file need to detect gulp module. So, add var gulp = require( 'gulp' ); in side custom gulp js file like gulpfile.js.
7. 'gulp' is not recognized as an internal or external command
1. npm install -g gulp-cli
8. Install relevant modules | CMD | Inside Gulp file
1. npm install --save-dev gulp-rename 
9. When you have only package.json file | When another developer have package.json file
1. Ensure package.json file is inside in your project folder.
2. In Command prompt -> npm install
3. Get relevant files and folder for the project.
10. Build Directory Structure | Sample architecture inside Gulp folder
1. E:\xampp\htdocs\Gulp>mkdir src
2. E:\xampp\htdocs\Gulp>mkdir dist
3. E:\xampp\htdocs\Gulp\src>mkdir js
4. E:\xampp\htdocs\Gulp\src>mkdir scss
5. E:\xampp\htdocs\Gulp\dist>mkdir js
6. E:\xampp\htdocs\Gulp\dist>mkdir css
7. E:\xampp\htdocs\Gulp>touch gulpfile.js -- Custom js file.
11. SCSS | gulpfile.js
1. Install Scss module E:\xampp\htdocs\Gulp>npm install --save-dev gulp-sass
2. Install autoprefixer module E:\xampp\htdocs\Gulp>npm install --save-dev gulp-autoprefixer
3. Install source map module E:\xampp\htdocs\Gulp>npm install --save-dev gulp-sourcemaps
4. require - This file interact with  'node_modules' folder. After install NPM and Gulp, inside gulpfile.js 'require' finds directly node_modules. 
5. gulp.task() - It's very inGulp just based on task function.
1. gulp.task( 'name_of_the_task', function(){ // compile }); 

6.  var gulp           = require( 'gulp' );  
    var rename           = require( 'gulp-rename' );   
    var sass           = require( 'gulp-sass');  
    var autoprefixer= require( 'gulp-autoprefixer');  
    var sourcemaps = require( 'gulp-sourcemaps');  
    var styleSRC     = './src/scss/style.scss';  
    var styleDIST     = './dist/css/';       
    gulp.task('style', function(){  
         // compile  
         gulp.src( styleSRC )  
              .pipe( sourcemaps.init())  
              .pipe( sass({   
                   errorLogToConsole:true,  
                   outputStyle: 'compressed'  
              }) )  
              .on( 'error', console.error.bind( console ) )  
              .pipe(autoprefixer({   
                   cascade: false   
              }) )  
              .pipe( rename( {suffix: '.min'} ) )  
              .pipe( sourcemaps.write( './' ) )  
              .pipe( gulp.dest( styleDIST ) );  
         return new Promise(function(resolve, reject) {  
       console.log("HTTP Server Started");  
       resolve();  
      });  
    });  
   

7. Execute E:\xampp\htdocs\Gulp\dist>gulp style
12. JS | gulpfile.js
1. Browserify - Handles modules, capable to import files.
1.  E:\xampp\htdocs\Gulp\dist>npm install --save-dev browserify
2. Transform Babelify  - Convert file with babelify
1. E:\xampp\htdocs\Gulp\dist>npm install --save-dev babelify
2. E:\xampp\htdocs\Gulp\dist>npm install @babel-core --save-dev
3. E:\xampp\htdocs\Gulp\dist>npm install @babel/preset-env --save-dev
4. But var babelify  = require( 'babelify' );
3. Bundle all together
4. Tap source code
1.  E:\xampp\htdocs\Gulp\dist>npm install --save-dev vinyl-source-stream
5. Rename
6. Minified files
7. Buffer
1.  E:\xampp\htdocs\Gulp\dist>npm install --save-dev vinyl-buffer
8. Initialize source map
9. Uglify
1. E:\xampp\htdocs\Gulp\dist>npm install --save-dev gulp-uglify
10. Write source map
11. Save into dist folder

12.  var jsSRC     = 'src/js/script.js';  
     var jsDIST     = './dist/js/';  
     var jsWATCH     = 'src/js/**/*.js';  
     var jsFILES     = [jsSRC];  
     gulp.task( 'js', function(){  
          jsFILES.map(function( entry ) {  
               return browserify({  
                    entries: [entry]  
               })  
               .transform( babelify, {presets: ['env']})  
               .bundle()  
               .pipe( source( entry ) )  
               .pipe( rename({ extname: '.min.js' }) )  
               .pipe( buffer() )  
               .pipe( sourcemaps.init({ loadMaps: true }) )  
               .pipe( uglify() )  
               .pipe( sourcemaps.write( './' ) )  
               .pipe( gulp.dest( jsDIST ) )  
          });   
          return new Promise(function(resolve, reject) {  
        console.log("HTTP Server Started");  
        resolve();  
       });  
     });  
    

13.  //Simple js  
     var jsSRC     = 'src/js/script.js';  
     var jsDIST     = './dist/js/';  
     var jsWATCH     = 'src/js/**/*.js';  
     gulp.task( 'js', function(){  
          gulp.src( jsSRC )  
               .pipe( gulp.dest( jsDIST ) );       
         return new Promise(function(resolve, reject) {  
         console.log("HTTP Server Started");  
         resolve();  
       });  
     });  
    

13. The default task | Execute all task together | Stage 1
1. gulp.task('default', gulp.parallel('style', 'js' ) );
14. Watch | Stage 2
1. E:\xampp\htdocs\Gulp\dist>npm install --save-dev gulp-watch
2. var watch = require( 'gulp-watch');
3. We simultaneously changes our code, after every change use gulp or gulp style in CMD is very cumbersome. When we use watch module then every save gulp automatically update files.
4. Execute E:\xampp\htdocs\Gulp\dist>gulp watch
5. Want exit from running watch press ctrl+C in CMD.

6.  gulp.task('watch', function() {  
     gulp.watch(styleWATCH, gulp.series('style')),  
     gulp.watch(jsWATCH, gulp.series('js'))  
    });  
   

7. When creating a file Gulp doesn't automatically detect the newly created file. Only simple change can solve this problem. Remove a first dot with back shah from the path.
   var jsDIST = './dist/js/'; -> var jsDIST = '/dist/js/';js';
15. Browser-Sync Auto Reload HTTPS
1. E:\xampp\htdocs\Gulp\dist>npm install browser--sync --save-dev
16. Install Google code prettify
1. E:\xampp\htdocs\Gulp>npm install code-prettify --save