Assets compilation using gulp, sass, npm

WHAT IS NPM AND GULP:

NPM (node.js package manager) is a package manager for the JavaScript programming language.

GULP ( gulp is just a simple toolkit to automate repetitive tasks and these repetitive tasks are usually compiling scss or sass file and javascript. )

ASSETS COMPILATION STRATEGY:

In order to keep track of all the files we need to use our project and create a gulp file, develop our automation tool or develop the entire workflow, to compile or distribution file we need to generate a Package.json.

HOW TO GENERATE PACKAGE.JSON DYNAMICALLY:

At first we have to be sure that our system is installed and available with node.js and npm.

We can check our system node.js and npm version by typing the following command in our terminal

node -v
npm -v 

Now After making a project folder and going to the project directory, we have to type the following command to create a Package.json with all useful information.

 npm init 

For my Project, after giving all information the Package.json file looks like below initially

{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo Error: no test specified" && exit 1""
}

Now we have to install gulp using following command

 
npm install --save-dev gulp 

And the Package.json file looks like

{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Anwesha",
"license": "ISC",
"devDependencies": {
  "gulp": "^4.0.0"
}
} 

Automatically npm will generate a Package-lock.json file and node_modules folder.

This node_modules is a gigantic folder filled with so many things that is necessary only for development. This folder should not be uploaded during deployment or in git.

If we want to share our code base with another one we need not send him/her node_modules folder. we only share the Package.json file and after using the following command the project will set up.

npm install 

HOW TO REQUIRE NODE_MODULES:

We installed gulp before and it was added under devDependencies to work it. We have to add it to gulpfile.js. At first, we have to require it and then have to declare tasks. Gulpfile.js looks like below

var gulp = require( 'gulp' );
gulp.task('style', function(){

}); 

HOW TO COMPILE AND MINIFY SASS/SCSS:

Here we will declare style tasks to compile our scss to css. At first, we have to install gulp-sass and gulp-rename running following commands

npm install --save-dev gulp-sass
npm install --save-dev gulp-rename 

Then we have to create gulp style task and my gulpfile.js looks like below:

var gulp = require( 'gulp' );
var rename = require ( 'gulp-rename' );
var sass = require ( 'gulp-sass' );
var styleSRC = './src/scss/style.scss';
var styleDIST = './dist/css/';
gulp.task('style', function(){
  gulp.src( styleSRC )
  .pipe( sass( {
      errorLogToConsole: true,
      outputStyle: 'compressed'
  }) )
  .on( 'error', console.error.bind( console ))
  .pipe( rename( { suffix: '.min' } ) )
  .pipe( gulp.dest( styleDIST ) );

}); 

After that if we run the command below we will get our scss file compiled to minified css in dist/css folder as like style.min.css

gulp style 

GULP AUTOPREFIXER AND SOURCEMAPPING:

At first we have to install gulp-autoprefixer and gulp-sourcemaps by running the commands given below

 
npm install --save-dev gulp-autoprefixernpm install --save-dev gulp-sourcemaps 

Then we have to change our gulpfile as like given below to pipe autoprefixer and make sourcemaps of our css file.

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(){
  gulp.src( styleSRC )
  .pipe( sourcemaps.init() )
  .pipe( sass( {
      errorLogToConsole: true,
      outputStyle: 'compressed'
  }) )
  .on( 'error', console.error.bind( console ))
  .pipe( autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
  } ))
  .pipe( rename( { suffix: '.min' } ) )
  .pipe( sourcemaps.write( './'))
  .pipe( gulp.dest( styleDIST ) );

}); 

Here autoprefixer works for last 2 versions of all browser and it compiles automatically that css for which we need to write -webkit or -moz versions. Sourcemaps create one

Style.min.css.map file which can match whatever we do with our minified css.

And if we open style.min.css now we can see a source mapping url.

GULP JS COMPILATION AND DEFAULT TASK:

To compile js we have to add a new task name js and the new task looks like

gulp.task('js', function() {
  gulp.src( jsSRC)
  .pipe(gulp.dest( jsDIST ));
}); 

And then if we run following command js will be compiled

gulp js 

Now we compiled before css and js separately but we want a default task and want to compile css and js parallely. So we will add the following task in gulpfile.js.

gulp.task("default",gulp.parallel('style','js')); 

Then if we run the following command css and js will compile Parallely

gulp

Thus we can compile other assets also creating gulp tasks and using some more gulp library we can watch the files changes and auto reload the browser.

Contributor: Anwesha Paul, Nascenia