From the autor of this website: Don't miss this!Visit www.kodhus.com for the best tutorials on howtos on web design and development.

Gulp eco system, Part 2: Using Gulp with Sass, concatenation and minification for production

Kodhus >
By Ramsich
Kodhus technical writer
by ramsich
Gulp eco system, Part 2: Using Gulp with Sass, concatenation and minification for production

Introduction

In the previous tutorial, we set up gulp and browser-sync to enable auto refresh of the browser when saving our html, css and javascript files. If you haven’t read the previous one, check it from the link below:

http://kodhus.com/gulp-eco-system-part-1-using-gulp-and-browsersync-for-browser-auto-refresh/

In this tutorial we are going to automate the generation of our css file from our sass file, and then we concat and uglify our css and javascript files for production.
If you don’t know what sass is, it is a css extension language that has lots of features and a markup that can be compiled to css. It basically let you write less code for your css. Take a look at the official site for more information.

Why do we do this?

Say you have multiple javascript files and multiple css files. In production, you want to optimize them so that you have less load on your page. To do that, you need to concat javascript files together(if you have multiple files) and then minify the result. You will do the same for css files.

Integrate Sass compilation

First thing first. Let’s install gulp-sass module in our project and add it to our package.json.

npm install gulp-sass --save-dev

If you have followed from the previous tutorial, we need to add a sass folder to our setup as follow:

|- gulpfile.js
|- node_modules/
|- package.json
|- dist  
|- app/
    |- css/
    |- images/ 
    |- index.html
    |- js/
    |- sass/

note: we added a dist folder for our final minified css and javascript file.

We require gulp-sass module at the top of our gulpfile.js alongside other requires.

var sass = require('gulp-sass');

Let’s say we have main.scss file in our sass folder that contains our styles. We need to compile this file into our app/css folder and make sure we reload the browser when we make changes to this file. Let’s add our gulp task to do that:

gulp.task('sass', function() {
    return gulp.src('app/sass/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({stream: true}));
});

Then we need to modify our watch task to first inject the styles from scss to css folder and then watch for any changes to our main.scss file. Therefore, we modify our watch task from previous tutorial to following:

gulp.task('watch', ['browserSync', 'sass'], function() {
    gulp.watch('app/index.html', browserSync.reload);
    gulp.watch('app/sass/*.scss', ['sass']);
    gulp.watch('app/js/*.js', browserSync.reload);
});

As you can see when this task runs, browserSync and sass will first run and then we watch for files in our scss folder so that if they change, we run the sass task which compiles the sass to css and reloads the browser.

gulp.watch('app/scss/*.scss', ['sass']);

Now if we run “gulp watch” and modify the main.scss file, we instantly see the effect in the browser.

Concat and minify for production

First we install the required node modules:

npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev
npm install gulp-uglifycss --save-dev

Now Let’s concat all javascript files in our app/js folder using the following task:

gulp.task('conc_min_js', function() {
    return gulp.src('app/js/*.js')
        .pipe(concat('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

You can see that we get all files in our app/js folder, we concat them into one file that we call all.js and then we uglify that file and save it in our dist folder.

Do not forget to require the concat and uglify module at the top of gulpfile.js.

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglifyCss = require('gulp-uglifycss');

We do the same for css files as well and finally we add one task to take care of these 2 tasks together:

gulp.task('conc_min_css', function() {
    return gulp.src('app/css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(uglifyCss())
        .pipe(gulp.dest('dist'));
});

gulp.task('concat-uglify', ['conc_min_js', 'conc_min_css']);

Now when you run “gulp concat-uglify” in your terminal, you will see 2 files, all.min.css and all.min.js are added to your dist folder.

Then you can take these 2 files and include them in your final html file that you put on your production server.

In the next tutorial we talk about a better way to handle these cases by using gulp-useref

Following is the full gulpfile.js:

var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglifyCss = require('gulp-uglifycss');

gulp.task('sass', function() {
    return gulp.src('app/sass/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: 'app'
        }
    });
});

gulp.task('watch', ['browserSync', 'sass'], function() {
    gulp.watch('app/index.html', browserSync.reload);
    gulp.watch('app/sass/*.scss', ['sass']);
    gulp.watch('app/js/*.js', browserSync.reload);
});

gulp.task('conc_min_js', function() {
    return gulp.src('app/js/*.js')
        .pipe(concat('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

gulp.task('conc_min_css', function() {
    return gulp.src('app/css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(uglifyCss())
        .pipe(gulp.dest('dist'));
});

gulp.task('concat-uglify', ['conc_min_js', 'conc_min_css']);

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>