How to use Gulp on Mac Windows & Linux

See AMP Version

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined offset: 1 in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 175

Notice: Undefined variable: style in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Notice: Undefined variable: wplinks_image in H:\root\home\emalayamm-001\www\analystik\blogue\wp-content\plugins\wp-links\wp-links.php on line 149

Gulp plugin is a task runner. For example, you can easily: transform your Sass (or Less) files in css files, minify them, using autoprefixer, join them in 1 files, check your JavaScript files with jsLint and much more. If you code a little bit it can be really useful. It is one of my favourite tools for my web site development and it is totally free. It might be a little frightening at the beginning but with some practice and courage, it is easier than it looks.

GRUNT?

Both will do exactly the same thing but not the same way. Grunt is older and a bit slower. However, Grunt has more plugins than Gulp.
For the time being, Grunt holds more “market share” in the community. But if you like configuring everything, considering all its plugins, Grunt is your tool.
Grunt executes each task one by one. Then, once the task is done it will save it into a temp file. When you need to work with it again, it will retrieve it perform the task then save it in a temp file again and delete the temp file when it is over.
Gulp plugin does it in streams. So, you can run a lot of tasks and ask it to create a new file, once all tasks are over.

For example: we will transform a sass file in css and minify it at the end.

Gulp PLUGIN will:
  1. Open the file
  2. Transform it in css
  3. Minify it
  4. Save the file where you want
Grunt will:
  1. Open the file then change it into a css 
  2. Save the file in /temp
  3. Open the file in /temp
  4. Minify it
  5. Save the file in /temp
  6. Open the file in /temp
  7. Save the file where you want
  8. Erase the /temp file

How to install:

At first you need node.js. There are different versions for Windows, Mac and Linux. You need to install npm. To know, if your are all set, just type in “terminal” or “cmd”:

npm -v

If you get an error you need to start it over.
First step is to install Gulp plugin globally. If you are in Windows you can ignore the “sudo”. On Linux or Mac, it will ask you to enter a password that it wont actually show.

sudo npm install gulp -g

After, you need to go into your project folder. In “terminal” or “cmd” type:

npm init

It will ask for your project name. After, you can skip all other questions by pressing the enter key. At the end, type:”yes” to confirm the process. In the folder it will create a package.json file that will be needed during the installation.

Now, you will install Gulp with some plugins into that folder. There will be a lot of messages during the installation but if you don’t see any error your good to go (if you see “warn” it’s also good).In this example, I will install all plugins to transform sass to css, but feel free to do more tasks and install more plugins. Check them on npmjs.com.

npm install gulp --save-dev

npm install [email protected] –save-dev npm install gulp-autoprefixer –save-dev npm install gulp-minify-css

Just put “terminal” or “cmd” aside we will use it at the end.

The gulpfile.js 

This file is in Javascript and, by chance, really easy to understand and so, to program as well. It will be used to make the task we want. In my example here you can see my structure:

index.html
|node_modules
|- css
|- sass
   |- style.scss
gulpfile.js
package.json

When I did “npm init” it created a file called “package.json” and a: “node_modules” folder.

We need to create a file called “gulpfile.js” (exactly without the quotes)
Our first task it’s to program the “requires”. We will create variables for the name as our tasks with the plugins installed. It looks like that:

var gulp = require('gulp');

var sass = require(‘gulp-sass’); var autoprefix = require(‘gulp-autoprefixer’); var minify = require(‘gulp-minify-css’);

We create the first task:”default — watch”

gulp.task('default', function(){
	gulp.watch('sass/**/*.scss', ['css']);
});

Gulp.watch checks our files and if there are any change, it runs a task (In this case, “css”). It looks-up all sass files in the sass folder and its children folders. The task css must be created:

gulp.task('css', function(){
	gulp.src('sass/style.scss')
		.pipe(sass())
		.pipe(autoprefix({
                   browsers: ['last 2 ie versions'],
                   cascade: false
                   })
                 )
                 .pipe(minify())
       .pipe(gulp.dest('css/'))
	
});

We simply add “.pipe” with the name variable created on top of the file.
To run all the processes just write in “terminal” or “cmd”:

gulp

The watch task will run until we press “control+c”, when css is edited, it continues to watch anyway.
If there is no error, when you save any scss file, (in this case) style.css will be created in the css folder. If not, check the gulpfile.js.

All code:

In “terminal” or “cmd”:

sudo npm install gulp -g

/* in your project folder */ npm init /* npm install gulp-*plugin name* –save-dev */ npm install gulp –save-dev npm install [email protected] –save-dev npm install gulp-autoprefixer –save-dev npm install gulp-minify-css –save-dev /* run gulp */ gulp

The gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');

gulp.task('default', function(){
	gulp.watch('sass/**/*.scss', ['css']);
});

gulp.task('css', function(){
	gulp.src('sass/style.scss')
		.pipe(sass())
		.pipe(autoprefix({
            browsers: ['last 2 ie versions'],
            cascade: false
        }))
       
        .pipe(minify())
		.pipe(gulp.dest('css/'))
	
});

One Comment

Maxime Trudel

After some tests, I figured out that the beta version of gulp-sass gives me better results than with the normal plugin. It enables the “null” argument.

The command line has been updated in the post.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *