Will & Skill Developers

Will & Skill Developers


Thoughts, snippets and ideas from the team at Will & Skill AB, Stockholm.

Faisal Mahmud
Author

“The mind is not a vessel to be filled, but a fire to be kindled.” ― Plutarch

Share


Getting started with gulp and less

Faisal MahmudFaisal Mahmud

Gulp is an intuitive, developer friendly streaming build system. And did I say that it is super fast!?

Why Gulp?

A lot of task runners require a lot of complex configs in order to work which makes it a lot harder to convey your intentions to your fellow coder/colleague. Gulp has solved this issue with simple and readable syntax that makes it easy to use and maintain.

Lets get ready to rumble

Install npm on your system if it is not installed already

git clone http://github.com/isaacs/npm.git
cd npm
sudo make install

Start with installing Gulp thru npm globally, this will install the runnable binaries that Gulp needs

npm install gulp -g

Then install Gulp locally to your dev environment

npm install gulp --save-dev

Notice the --save-dev flag that indicates that this dependency should be added to your devDependencies list and saved to your package.json file

If you have not created a package.json file you can easily create one with the command below

echo '{}' > package.json

It is considered best practice to have and maintain a package.json file in order to make the installation process for you or your friend/colleague easier when setting up this project from scratch...

In this example I am going to demonstrate how to watch and compile bootstrap.less to bootstrap.css

Create a gulpfile.js and drop the lines in the example below into the file

// Import the dependencies
var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css');


// Define a task to compile bootstrap.less
gulp.task('less', function(){
    return gulp.src(['assets/less/bootstrap.less']).
        pipe(less()).
        pipe(minifyCSS({})).
        pipe(gulp.dest('./assets/css'));
});

// Watch for changes in the less folder
gulp.task('watch', ['less'], function () {
    gulp.watch('assets/less/**/*.less', ['less']);
});

As you can see, there are a few more dependencies you need to install before we can compile our less

npm install gulp-less --save-dev
npm install gulp-minify-css --save-dev

Now your packages.json should look something like this

{
  "devDependencies": {
    "gulp": "^3.8.8",
    "gulp-less": "^1.3.6",
    "gulp-minify-css": "^0.3.10"
  }
}

The next person that will inherit this project from you can now use the command below to install all the packages

npm install

Make sure that your working directory is the same as the directory where package.json is located, otherwise it might not work. You should preferably create both the package.json and gulpfile.js at the root of your repo

+ repo
    ...
    - gulpfile.js
    - package.json
    - .gitignore

Now to the fun part!

In order to compile your less file run

gulp less

In order to watch for changes in the less folder

gulp watch

Gulp will now look for changes in the directory specified and run the less compilation task for you!

Happy coding!

Faisal Mahmud
Author

Faisal Mahmud

“The mind is not a vessel to be filled, but a fire to be kindled.” ― Plutarch

Comments