At Graydient Creative I use node.js, npm and gulp for building web applications. In this post I’m going to cover how I use certain node modules along with gulp in order to help myself streamline an application.
After installing node and npm, install gulpjs on your system with your terminal or favorite terminal emulator (item2 for me).
$ npm install --global gulp-cli
The goal of gulp-cli is to let you use gulp like a global program, but without installing gulp globally. This allows me to to use different versions of gulp without running into versioning conflicts.
Now I can begin with a high level overview of my app structure. I’m going to use the HTML5 boilerplate example. Open up your favorite text editor (sublime text3 for me) and create the following structure.
│ ├── main.css
│ ├── main.scss
│ ├── main.js
I’ve cut out some files but since I’m are going over globing, adding those files back in should be simple. In the root of this project I need to initialize npm and create a
package.json file. I can easily do this by running
$ npm init
Run through the interactive steps, you can press enter for most part and npm will give you default naming conventions. This is what your
package.json should roughly look like.
Next I need to manually create a
gulpfile.js . Here are the gulp variables I’m are going to use in this file.
T0 get started with the first two variables
gulp-sass I need to install them to my package.json. The first as a dependency and the second as a devdependency, as I already installed gulp-cli.
$ npm install gulp-sass --save
$ npm install gulp-sass --save-dev
--save-dev , this will save gulp-sass as a dev-dependency in our package.json. Read more about npm dependencies here, but the gist is that the
--save flag is for production dependencies and the
--save-dev is for development dependencies.
gulp-sass variables added to my package and saved in my dependencies I need to write the actual gulp-sass task. (read the comments to see how everything is hooked up).
As you can see inside the gulp-sass task I use the glob functionality to watch for .scss files the sass folder and all subfolders. This is especially handy for
@imports when I have multiple scss folders calling into a main.scss file. I’m also using sourcemaps for browser debugging and browsersync for live-reloading. Because I’m using browsersync, I need to write a browsersync task along with a watch task to make it easier to also watch for .html and .js files.
The next step is to write a gulp watch task that watches .html, .scss and .js in our app
I now have a sass function that converts .scss file into css, adds sourcemaps and live-reloads the page. Notice how in the above task I add
['browserSync' , 'sass'] to the gulp watch task. This allow the watch task to also use browsersync and run the sass task into one function.
With the three gulp tasks I also need to install each of the gulp variables manually or simply list them in the
package.json under devDependencies along with their latest version number. To save time and avoid running duplicate
$ npm install gulpVar --save-dev multiple times, I’ve compiled the following below.
Now I can run,
$ npm install
Npm will run through our package.json and run through all dependencies and devdependencies and install our gulp variables. After npm is done installing I should be ready to run our gulp sass task.
$ gulp watch
Browersync should now run with a local and external server and should look like the following inside your terminal.
Open up any .scss file and change a property and save. Browsersync should log a console message with
[BS] 1 file changed (style.css) [10:16:17] Finished 'sass' after 98 ms`. Also save any .html or .js files and broswersync will detect a change and live-reload.
I now have a small app that compiles sass into css and uses browserync that implements live reloading and gives us a development and external server. In the next part I will go over how to minimize assets and move them into a production ready folder for easier deployments or client hand-offs.