Installing Gulp, a project automation build tool using Node.js on Mac OS

Install node.js

First, you need to install node.js. Generally speaking, you only need to download the installation package and install it in the official website of Node.js. But I failed shamefully, and the following error popped up:

So I changed to brew Dafa:

 brew install nodejs

Install Gulp

gulp is installed using the npm command of Node.js:

 npm install --global gulp

Then install it in the project directory:

 npm install --save-dev gulp

I'm quite puzzled about this step. With my many years of experience as a coder, even if the global installation is installed, it should be available where to use it. But gulp obviously isn't like that. If you do not perform this step in the project directory, the following error will be prompted when using the gulp command:

… Local gulp not found in …

… Try running: npm install gulp

Finally, execute the gulp command in the project directory. If the following content is output, it means that the installation is complete:

… No gulpfile found

Simple example

The following shows the use of Gulp to build a static website development server and supports live refresh (livereload) function.

First, you need to install the browser plug-in for livereload. The plug-in address is: http://livereload.com/extensions/, which supports three major browsers: Chrome, Firefox, and Safari. After the plug-in is installed, a button will appear on the browser. This button has two states. Solid dots indicate that the plug-in is enabled, and hollow dots indicate that the plug-in is not enabled. Remember to remember!

Then create a simple project structure:

 ./gulpfile.js./public/./public/index.html

Use the following command to install gulp and related components:

 npm install --save-dev gulp gulp-connect

gulp-connect is a gulp plug-in that provides static web server functions and integrates livereload functions.

Next, you need to edit the gulpfile.js file, the content is as follows:

 var gulp = require('gulp'), connect = require('gulp-connect') gulp.task('server', function() { connect.server({ root: 'public', livereload: true }) }) gulp.task('html', function() { gulp.src('./public/*.html').pipe(connect.reload()) }) gulp.task('watch', function() { gulp.watch(['./public/*.html'], ['html']) }) gulp.task('default', ['watch', 'server'])

Finally run this web server:

gulp

Open the browser and visit http://localhost:4000. Then try to modify the content of the index.html file and save it. Under normal circumstances, the browser side should automatically refresh and display the modified content.

Simple comparison between Gulp and Grunt

Let's look at an example, construct Sass in Gulp and Grunt respectively:

Grunt:

 sass: { dist: { options: { style: 'expanded' }, files: { 'dist/assets/css/main.css': 'src/styles/main.scss', } }},autoprefixer: { dist: { options: { browsers: [ 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ] }, src: 'dist/assets/css/main.css', dest: 'dist/assets/css/main.css' }},grunt.registerTask('styles', ['sass', 'autoprefixer']);

Grunt needs to configure plug-ins separately and specify its source and destination path. For example, we take an archive as input to plug-in Sass and store the output results. When setting up Autoprefixer, you need to use the output of Sass as input to generate a new file. Let's take a look at the same configuration in Gulp:

Gulp:

 gulp.task('sass', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'compressed' })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/assets/css'))});

In Gulp we only need to enter a file. After plug-in Sass processing, it is then passed to plug-in Autoprefixer, and finally a file is obtained. This process speeds up the construction process, eliminating the reading and writing unnecessary files, and only requires a final file.