How to use Gulp without using Gulp

Leverage your gulpfile with npm scripts

relevant photo
Update (02/16/2016): Things in front-end change very quickly. With that said, I would say the majority of this article is showing you how I used to do things with gulp more than 6 months ago. That’s a long time in front-end world. I currently use a combination of gulp and npm scripts for my front-end dev/build environment and I’m looking into webpack now that I’m writing more ES2015. I wanted write this little update in case people are unsure of how up-to-date this article is just so that there’s context for the following content in this article.

Last week, I wrote about how to watch and compile Sass with npm.

Today, I want to take this a bit further because it’s 2015 and you might have a trusty gulpfile or gruntfile that is your go to task runner file for all the things.

Me too!
I do a lot more than just compiling and watching Sass.

In this article we’re going to learn how to take that gulpfile you use everyday and run a developer environment I use everyday with one command.

What are we doing…exactly?

Basically, we’re going to build this repo from scratch. If you want to dive in right away, feel free to use the repo as a boilerplate for any new Express.js apps you build.

For my everyday use, I want to be able to run one npm script:

$ npm run dev 

and do the following things:

  • Start a local web server with nodemon using express.
  • Compile scss files to css files with gulp-sass.
  • Add vendor prefixes to your styles with gulp-autoprefixer.
  • Run a live-reload server with browsersync.

Here’s the gulpfile I’m using for this project — this is more-or-less what I use in all my projects.

With that said, let’s get started!

Create file structure

Create a new folder for your project, give it a name and change into that project directory:

$ mkdir project-name && cd project-name

Make a package.json with npm init.

$ npm init

Make the following directories:

$ mkdir public scss
  • public: for static assets (css, js, html).
  • scss: for scss files.

Create the following files:

$ touch gulpfile.js server.js .gitignore scss/main.scss
  • gulpfile.js: is for our gulp tasks (this can also be a gruntfile if you prefer).
  • server.js: express web server.
  • .gitignore: a file that prevents certain files and folders from being checked into git and GitHub.

Your file structure should look like this repo.

Install Dependencies

Let’s install express.

$ npm install express --save

And install gulp packages.

$ npm install gulp gulp-sass gulp-autoprefixer gulp-plumber --save-dev

And lastly, install browsersync and nodemon.

$ npm install browser-sync nodemon --save-dev

Writing server script

Open up server.js and write this code.

// server.js
var express = require(‘express’);
var port = process.env.PORT || 3000;
var app = express();
app.use(express.static(__dirname + ‘/public’)); 
app.get(‘/’, function (req, res) { res.sendFile(‘index.html’);});
app.listen(port);

To start this server “the less convenient way”, we can write this:

$ nodemon server.js

But we can write this into an npm script that we can leverage into other npm scripts later.

In our package.json, inside the “scripts” object, write this script:

“scripts” : {
"watch-server": "nodemon server.js"
}

Now try running the following npm script:

$ npm run watch

The express server should start on http://localhost:3000

Writing Sass script leveraging Gulp

So now we’re getting into the meat of why you’re reading this article — doing Gulp stuff without using Gulp. Because we can do Gulp stuff with npm!

Copy and paste this code into your gulpfile.js.

var gulp = require(‘gulp’);
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var plumber = require('gulp-plumber');
var reload = browserSync.reload;
var AUTOPREFIXER_BROWSERS = [  
'ie >= 10', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'Safari >= 7', 'Opera >= 23', 'iOS >= 7', 'ChromeAndroid >= 4.4', 'bb >= 10'
];
var SOURCE = {  
scss: 'scss/**/*.scss',
css: 'public/css',
html: 'public/*.html'
};
gulp.task('sass', function () {  
gulp.src(SOURCE.scss)
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({ browsers: AUTOPREFIXER_BROWSERS }))
.pipe(gulp.dest(SOURCE.css))
.pipe(reload({ stream: true }));
});
gulp.task('browser-sync', function() {  
browserSync({
proxy: "localhost:3000"
});
});
gulp.task('watch-sass', ['sass', 'browser-sync'], function () {  
gulp.watch(SOURCE.scss, ['sass']);
});
  • That last task (gulp watch-sass) is the task that we need to give to our npm scripts in package.json
  • Digging deeper: you can see the gulp sass task will do the Sass compiling, autoprefixing and live-reloading for you with the help of browsersync.
  • Browsersync (gulp browser-sync) will proxy the express web server at localhost:3000 and will run a live-reload server for you at http://localhost:3001

Open package.json and add this to your “scripts” object:

“scripts” : {
"watch-server": "nodemon server.js",
"watch-sass": "gulp watch-sass"
}

So now if you open two terminal windows, you can run watch-server and then watch-sass:

$ npm run watch-server

and in another window…

$ npm run watch-sass

So that’s pretty good…but we can make this better.

One script to rule them all

Stop the npm scripts running in your terminal and try running this in one window:

$ npm run watch-server & npm run watch-sass

Both of those things are happening at the same time in the same window!

So we can combine these into one script that runs all of these things. Add this to your “scripts” object in package.json:

“scripts” : {
"watch-server": "nodemon server.js",
"watch-sass": "gulp watch-sass",
"dev": "npm run watch-server & npm run watch-sass"
}

Now we can simply type this one command and we’ll get the same gulp-tasky-sassy-nodey-scripty goodness:

$ npm run dev

So…

Right?

Amirite?

When I first saw this happening, it was like birthday cake and puppies.

You can definitely extend this to meet more of your grunty-gulp-tasky needs.

For me, this wasn’t a huge change from my normal development set-up but it’s the small convenience of having to type only one command to get everything started…that adds up for me in #win.

So if you’re feeling good about this, continue to feel good.

Resources

I used these blogs to learn how to leverage npm scripts, you might be able to find more advanced material in there that will take you further than what’s written in this blog.

You can also grab the repo for this work here:

I also created a yeoman generator for this here:

Bye!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.