A simple frontend workflow for Gulp
What is Gulp?
Gulp is a task/build runner which uses Node.js for web development. In this tutorial, I will not explain how to create your Gulp plugin but I will show you how you can create a simple, basic, customized build process for your frontend workflow to ease your job.
Gulp is often used for automated front end tasks like:
- Compiling preprocessors like Sass or Less
- Optimizing assets like images, CSS and Javascripts
- Including browsers prefixes with Autoprefixer
- Injecting CSS in browser without reloading page whenever file is saved
- Spinning up a web server
This is not, of course, a comprehensive list of things Gulp can do. There are thousands of plugins which you can use or you can build your own.
Step 1: Install Node.js
Because Gulp is built on Node.js (Javascript runtime built on Chrome’s V8 Javascript engine), first we need to install Node.js.
Node.js can be downloaded for Windows, Mac and Linux at nodejs.org/download/. You can also install it from the command line using the package manager.
Once installed, open a command prompt and enter:
$ node-v
This will show a Node.js version number if it is a correctly installed.
Step 2: Install Gulp
Now we can install Gulp using by using the following command in command line:
$ sudo npm install gulp -g
Note: Mac users need the sudo keyword. “$” in the code above just symbolize the command prompt. You don’t need to enter it.
The “-g” option in the command line tells to install Gulp globally, not just for the specific project. It allows you to use Gulp command anywhere on your system.
Now, we can make a project that uses Gulp.
Step 3: Set Up a Gulp Project
Go to
root/skin/frontend/design_package/default/
In this folder, we will create a Gulp config file and install all Gulps dependencies. Enter the command below in command line:
$ npm init
The “npm init” command creates a package.json file in which are stored information like dependencies, project name etc.
Once the package.json file is created, we can install Gulp and other plugins used in this tutorial.
Step 4: Installing Gulp
Install Gulp locally in the same folder. This will create “node_modules” folder where are all our dependencies files located. Enter the command in command line:
$ npm install gulp --save-dev
Great, now we can move on to install Gulp-Sass plugin.
Step 5: Installing Gulp-sass
Gulp Sass is a libsass version of Gulp. Libsass is a much faster in compiling sass files than Ruby.
Enter the command in command line:
$ npm install gulp-sass --save-dev
Great, move on to the next dependency, Gulp Source Maps.
Step 6: Install Gulp Source Maps
Gulp Source Maps is useful for debugging. You can see in which sass file are styles located for the inspected element in the browsers Inspector tool.
Enter the command in command line:
$ npm install gulp-sourcemaps --save-dev
Step 7: Install Autoprefixer
Autoprefixer for Gulp helps us to write CSS without vendor prefixes. It will automatically search if there is a need to add vendor prefix for some newly CSS properties. Autoprefixer is pulling data from caniuse.com site and adds prefixes if there is a need for it.
In the command line tool, enter command:
$ npm install gulp-autoprefixer --save-dev
Step 8: Install Browser Sync
BrowserSync is one of my favorites. It can reload a browser page after file saving, inject CSS without reloading page, sync browser page screen and your browsing actions through devices. Very handy.
Write in the command line:
$ npm install browser-sync --save-dev
Step 9: Create a Gulp config file
Create a new file gulpfile.js in the same folder. This will be the main configuration file for the Gulp where we write our tasks.
Open up gulpfile.js and write:
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
We need to require all dependencies we have installed. The requirement statement tells Node to look into the node_modules folder for a package. Once the package is found, we assign its contents to the variable.
Next step is to create two variables used by GulpSass plugin for compiling sass files and we will assign to them a path for our Sass files and path for our compiled CSS file.
Write:
var input = './scss/**/*.scss';
var output = './css';
We can now begin to write a Gulp sass task. Add a code below:
gulp.task('sass', function () {
return gulp.src(input)
.pipe(sourcemaps.init())
.pipe(sass(errLogToConsole: true,outputStyle: 'compressed'))
.pipe(autoprefixer(browsers: ['last 2 versions', '> 5%', 'Firefox ESR']))
.pipe(sourcemaps.write())
.pipe(gulp.dest(output))
.pipe(browserSync.stream());
});
Add a watcher task for watching Scss file changes and BrowserSync settings. Add a code below:
// Watch files for change and set Browser Sync
gulp.task('watch', function() {
// BrowserSync settings
browserSync.init({
proxy: "mydomain.loc",
files: "./css/styles.css"
});
// Scss file watcher
gulp.watch(input, ['sass'])
.on('change', function(event){
console.log('File' + event.path + ' was ' + event.type + ', running tasks...')
});
});
Finally we create our default/main task which will run all above task. Add a code below:
// Default task
gulp.task('default', ['sass', 'watch']);
Our final gulpfile.js should look like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var input = './scss/**/*.scss';
var output = './css';
gulp.task('sass', function () {
return gulp.src(input)
.pipe(sourcemaps.init())
.pipe(sass(errLogToConsole: true,outputStyle: 'compressed'))
.pipe(autoprefixer(browsers: ['last 2 versions', '> 5%', 'Firefox ESR']))
.pipe(sourcemaps.write())
.pipe(gulp.dest(output))
.pipe(browserSync.stream());
});
// Watch files for change and set Browser Sync
gulp.task('watch', function() {
// BrowserSync settings
browserSync.init({
proxy: "mydomain.loc",
files: "./css/styles.css"
});
// Scss file watcher
gulp.watch(input, ['sass'])
.on('change', function(event){
console.log('File' + event.path + ' was ' + event.type + ', running tasks...')
});
});
// Default task
gulp.task('default', ['sass', 'watch']);
To run above tasks, enter
$ gulp default
command in the command line.
Hope this will help someone to automate frontend workflow with Gulp. Thanks for reading!