In this example, we’ll go through configuring gulp for a new project. We’ll be using yarn as the dependency manager. If you are not familiar with yarn, please refer to my tutorial for setting it up.
Click Here to Configure The Yarn Dependency Manager
Installing Gulp to a New Project
Gulp may seem like a scary thing to wrap your head around at first, but it’s actually quite easy to start using once you understand the basics. To start, let’s go ahead and within your project or a blank directory run the following commands.
Initialize a new project within a directory
yarn initInstall Gulp
yarn add gulpCreate an gulpfile.js in the root of your project with the following contents
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});The gulpfile.js file is where all of your configurations will go letting gulp know exactly how to work within your project. This is a basic example which does not actually accomplish anything, but instead is a great boilerplate for you to build off of.
Run Gulp
gulpBy default when running this command it will run the task named ‘default’. In order to run specific tasks you can verbosely write
gulp <task> <othertask>Example
So now lets setup an example project using twitters bootstrap framework. We’ll want to start by creating a new directory where we will store our project. I normally do this by opening up a terminal and creating the directory using the following command.
mkdir <directory_name>You can also setup the directory however you feel comfortable.
Once the directory is created we’ll then need to change into it using cd
Once you’re within the newly created directory for our project, we’ll want to initialize with yarn in order to take advantage of it for handling our dependencies.
yarn initFill in the various prompts in order to proceed to the next step.
After we have yarn initialized, we’ll then want to add 3 packages to our project: gulp, gulp-sass, and bootstrap-sass.
To find packages that you might want to use, you can use the search on the npmjs.com
First, we’ll install bootstrap-sass
yarn add bootstrap-sassSecondly, let’s get gulp installed.
yarn add gulpLastly, let’s install gulp-sass
yarn add gulp-sassThis will allow us to convert the bootstrap sass files to actual css easily.
You’ll notice that now if you open your package.json file, you’ll see those 3 packages now added as dependencies for your project.
Now we’re ready to start configuring our gulpfile.js to utilize our new dependencies. The first thing we’ll want to do is get the files that need to be copied from our newly created node_modules folder.
The directory node_modules is where all of your dependencies are stored when you install them via the yarn or npm command. You should never edit the files directly within that directory as they can be overridden with future updates from their publishers.
First I’d recommend adding the path to your node_modules/.bin/ directory to your environment variable on your system this way you can just run gulp by itself instead of ./node_modules/.bin/gulp
Once that is setup, then we can setup the gulpfile.js file to first copy our bootstrap files to our new locations.
First, within the gulpfile.js file, we’ll want to import the plugins that we will be using at the top as such.
var gulp = require('gulp');
var sass = require('gulp-sass');Now that we have our required plugins included, we’ll then want to define our task. For this example, we’ll just stick to using the default task as so.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
});Next, up we want to copy our bootstrap-sass files to our new location. We’ll set them up in the path assets/sass/bootstrap/ for now.
Feel free to organize the directories however you like for your own projects.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
// Copy SASS files to new location
gulp.src([
'./node_modules/bootstrap-sass/assets/stylesheets/*',
'./node_modules/bootstrap-sass/assets/stylesheets/*/*',
'./node_modules/bootstrap-sass/assets/stylesheets/*/*/*',
]).pipe(gulp.dest('./assets/sass/bootstrap/'));
});You’ll see that we defined to source of the files we want to copy by using .src, and passing an array of the directories we want to copy. The asterisk is a wildcard stating you want everything within the designated directory.
After we have the source, we then need to pipe it to the next command which defines the new destination that all of the previous files should be copied to.
Next lets create a file within our assets/sass/ directory for custom.scss. We’ll use this file to place any of our custom sass code, while also importing the bootstrap library at the top.
@import 'bootstrap/bootstrap';
body {
background-color: green;
}Lastly, we’ll want to convert our new SASS file to CSS, in order to use it within our project. We’ll accomplish that by using the following code within our default task block.
// Convert SASS to CSS
gulp.src('./assets/sass/custom.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));You’ll note that we our exporting the final useable CSS to a directory named css. You can update the path to your liking.
Here’s our final version of our gulpfile.js file for your reference.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
// Copy SASS files to new location
gulp.src([
'./node_modules/bootstrap-sass/assets/stylesheets/*',
'./node_modules/bootstrap-sass/assets/stylesheets/*/*',
'./node_modules/bootstrap-sass/assets/stylesheets/*/*/*',
]).pipe(gulp.dest('./assets/sass/bootstrap/'));
// Convert SASS to CSS
gulp.src('./assets/sass/custom.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});The only thing left now is to run the gulp command. Depending on whether or not you setup your environment variable you’d run one of the following commands.
gulp or ./node_modules/.bin/gulpI hope this example helps jump start you into using gulp. It is a super powerful tool and can improve the way you develop applications dramatically.
Bonus:
As a bonus, let’s go ahead and add another plugin which will create a minified version of your CSS files.
This can also be used to minify JS files if necessary.
First, we’ll want to add another plugin gulp-clean-css
yarn add gulp-clean-cssNext, we’ll need to include the plugin at the top of our gulpfile.js file.
var cleanCSS = require('gulp-clean-css');Now within our default task, we can add the code needed to handle the minifying as well as assuring the CSS we write is supported in ie8.
gulp.src('css/*.css')
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(gulp.dest('dist'));You'll note that I’m now outputting the file to a dist folder to separate it from our non minified version.
After you’ve made the required changes to the gulpfile.js file, then you can run the gulp command to process your changes.
You’ll want to run gulp each time you make a change to your CSS files. You could also make a watcher, to look for changes in your files this way it happens automatically while developing.
I’ll setup a different tutorial for setting up a watcher in the future.
Here’s the full file of everything we’ve done so far. Now go have some fun with gulp.
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
gulp.task('default', function () {
// Copy SASS files to new location
gulp.src([
'./node_modules/bootstrap-sass/assets/stylesheets/*',
'./node_modules/bootstrap-sass/assets/stylesheets/*/*',
'./node_modules/bootstrap-sass/assets/stylesheets/*/*/*',
]).pipe(gulp.dest('./assets/sass/bootstrap/'));
// Convert SASS to CSS
gulp.src('./assets/sass/custom.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
// Create Minified CSS Versions With Support for ie8
gulp.src('css/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});