Gulp入门指南

安装Gulp.js

---

Gulp是给予Node.js的，故首先安装Node.js[1]，完成之后执行下面的命令安装Gulp：

 

 

npm install -g gulp
//-g (global)执行全局安装gulp，这样在任何地方都可以进行 gulp 操作

安装完成之后，需要在我们的项目中使用，需要命令行切换到项目更目录（可以 右键 点击项目目录选择 在此处打开命令窗口(W)）然后执行下面的命令：

    

 gulp init 
// 生成一个package.json，里面是一些常规的配置信息

如图所示，会需要设置一些name，version等属性，一般一直按回车确认即可

     

完成之后在项目更目录下多了一个package.json的文件，内容如下：

  npm install gulp --save-dev
     //将gulp安装到项目目录中，bing生成依赖信息于package.js内的 devDependencies

 

安装Gulp插件

Gulp的任务都是以插件[2]的形式存在，所以在使用前，需要先安装我们用到的插件到项目目录内，插件的安装命令：

 

    

 npm install 插件名 --save-dev
//多个插件可以用空格分隔
 
npm install gulp-util gulp-uglify gulp-concat --save-dev
//安装 gulp-util gulp-uglify gulp-concat 插件
//gulp-uglify:用于压缩js
//gulp-concat : 用于合并文件

 

---

创建配置文件gulpfile.js

要使用Gulp还需要进行相关的配置，把我们的插件载入进去：

在项目的更目录内创建一个gulpfile.js文件（必须是这个文件名），

举个例子(安装一个压缩html的插件)

     

npm install gulp-htmlmin --save-dev
     //安装html压缩的插件

配置内容如下：

     

var gulp = require('gulp');
     var htmlmin = require('gulp-htmlmin');
 
     //创建一个任务
     gulp.task('minify',function(){
          gulp.src('src/*.html')
                 .pipe(htmlmin({collapseWhitespace:true}))
                 .pipe(gulp.dest('dist'))
     });

 

在该目录下的控制台中键入：

     

gulp minify   //执行压缩html的任务

查看项目中目录：

自动生成了一个dist文件夹，并且里面有一个index.html文件

 

其他插件也是同样的方式进行配置，赶紧上手去试试吧，是不是觉得 so easy呢？

 

[1]:https://nodejs.org/en/download/

[2]:https://www.npmjs.com/  里面有海量的插件库