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 init

Install Gulp

yarn add gulp

Create an gulpfile.js in the root of your project with the following contents

1

2

3

4

5

6

vargulp=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

gulp

By 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 <directory_name> or if you’re not yet in a terminal open one up and navigate to it so that we can run the next set of commands.

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 init

Fill 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-sass

Secondly, let’s get gulp installed.

yarn add gulp

Lastly, let’s install gulp-sass

yarn add gulp-sass

This 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.

1

2

3

vargulp=require('gulp');

varsass=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.

1

2

3

4

5

6

7

vargulp=require('gulp');

varsass=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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

vargulp=require('gulp');

varsass=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.

1

2

3

4

5

6

@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.

1

2

3

4

5

// 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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

vargulp=require('gulp');

varsass=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/gulp

I 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-css

Next, 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.

1

2

3

4

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.

Tags

About This Blog

I'm writing this blog in order to share what I'm learning with the world. Since you learn best by teaching others and writing things down, I figured this would be the best way to really tackle any new technologies I plan on learning. I hope this blog will help you as much as it will benefit me.