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"
},
"author": "Anwesha",
"license": "ISC"
}
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
No comments