Gulp使用教程

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

本示例以gulp-minify-css为例（压缩css文件的gulp插件）展示gulp的常规用法，只要学会使用这个gulp插件后，其他插件看看帮助文档就可以了。

让我们一起来学习gulp吧！ ^_^

---

步骤

安装node.js

1、gulp是基于node.js，理所当然需要安装node.js。

2、安装：打开node.js官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。然后像安装QQ一样安装它就可以了（安装路径随意）。

3、mac系统用：brew install node进行安装。

node.js官网：https://nodejs.org/en/

使用命令行

1、node -v查看安装的node.js版本，出现版本号，说明已正确安装node.js。

2、npm -v查看npm的版本号。

未能出现版本号，请尝试注销电脑重试
npm是在安装node.js时一同安装的node.js包管理器

npm介绍

npm（node package manager）node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。

安装gulp插件用npm ：
命令提示符执行:npm install [-g] [–save-dev]；

• <name>: node插件名称

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

• <g>:全局安装，使用插件时通过require()调用

• --save:将配置信息保存至package.json文件里（是node.js项目配置文件）

• -dev：将配置信息保存至package.json的devDependencies节点

为什么要保存至package.json？
1、因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可。
2、命令提示符执行npm install，则会根据package.json下载所有需要的包。
3、npm安装插件过程相当于是从npm官网下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），解决办法往下看。

选装cnpm

1、因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
官网说法：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”。

2、官方网址：http://npm.taobao.org。

3、安装：命令提示符执行

npm install cnpm -g --registry=https://registry.npm.taobao.org 

注意：
1、安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
2、cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

全局安装gulp

1、说明：全局安装gulp目的是为了通过她执行gulp任务。

2、安装：命令提示符执行cnpm install gulp -g。

3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

新建package.json文件

package.json是node.js项目必不可少的配置文件，是一个普通json文件，存放在项目根目录下，它是一个json文件。

{  "name": "test",   //项目名称（必须）  "version": "1.0.0",   //项目版本（必须）  "description": "This is for study gulp project !",   //项目描述（必须）  "homepage": "",   //项目主页  "repository": {    //项目资源库    "type": "git",    "url": "https://git.oschina.net/xxxx"  },  "author": {    //项目作者信息    "name": "surging",    "email": "[e-mail]"  },  "license": "ISC",    //项目许可协议  "devDependencies": {    //项目依赖的插件    "gulp": "^3.9.1",    "gulp-minify-css": "^1.2.4",  }}

注意：json文件内是不能写注释的，复制上边内容请删除注释

我们可以手动新建这个配置文件，但是作为一名有志青年，我们应该使用更为效率的方法：命令提示符执行cnpm init。

本地安装gulp插件

1、本示例以gulp-minify-css为例，命令提示符执行

cnpm install gulp-minify-css --save-dev

2、插件将会安装在node_modules的gulp-minify-css目录下，该目录下有一个gulp-minify-css的使用帮助文档README.md。

3、为了能正常使用，我们还得本地安装gulp，

cnpm install gulp --save-dev

新建gulpfile.js文件

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

//导入工具包，require('node_modules'里的对应模块);var gulp = require('gulp');//调用本地安装gulp所用到的地方var cssmin = require('gulp-minify-css');//调用gulp-minify-cssvar uglify = require('gulp-uglify');//定义一个名叫“cssmin”的任务gulp.task('cssmin',function(){    return gulp.src('src/css/*.css')//该任务针对的文件               .pipe(cssmin())//该任务调用的模块               .pipe(gulp.dest('dist'));//将会在dist文件下生成一个all.min.css的压缩css文件});gulp.task('jsmin',function(){    return gulp.src('src/js/*.js')               .pipe(uglify())               .pipe(gulp.dest('dist'));});//默认任务gulp.task('default',['cssmin','jsmin'],function(){        gulp.watch('src/css/*css',['cssmin']);        //监听'src/css/'下的所有css文件，文件有变动，执行cssmin任务        gulp.watch('src/js/*js',['jsmin']);        //监听'src/js/'下的所有js文件，文件有变动，执行jsmin任务});

运行gulp

1、命令提示符执行gulp 任务名称。

2、编译gulp-minify-css：命令提示符执行gulp cssmin。

3、当执行gulp default或gulp将会调用default任务里的所有任务[‘cssmin’,’jsmin’]。

常用插件

1、css文件压缩：gulp-minify-css；

2、文件合并：gulp-concat； http://www.ydcss.com/archives/83

3、文件重命名：gulo-rename;

4、js文件压缩：gulp-uglify; http://www.ydcss.com/archives/54

5、html文件压缩：gulp-htmlmin; http://www.ydcss.com/archives/20

6、watch：监听

demo
GitHub:http://git.oschina.net/lanwithyu/gulp