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/  里面有海量的插件库