[翻译]Gulp.js简介 - 脚后跟着猫
- 新图片或修改后图片的压缩
- 去除调试语句如console,debugger
- 合并和压缩css和js
- 把更新的文件部署到服务器
你可能设想大家都会记住所有的这些操作，但总会有人忘记一两条。随着项目越来越大，上面的工作越来越浪费时间。只好设专人来完成这些枯燥的工作。
能不能让这些工作不用占用人手呢？
你需要一个自动化的运行程序或构建过程，这听起来很复杂
虽然在搭建这个构建过程比单独执行每个小任务要复杂得多，但随着应用越广，你可以节省大量的时间和人力，而且也可以避免错误。
采取注重实效的解决方案：
- 把最耗时的任务自动化
- 不要过度设计，初始安装设置尽量短和简单
- 使用一个任务管理工具一段时间，不要一时兴起随便切换到另外一个
我们将讨论一些新的工具和概念。
- Node.js-我们将使用node.js，但不用对它了解太深，只要知道一些javascript知识，并会用搜索引擎就好了。
- 命令行-你得会输入命令，虽然没有图形界面，但一些命令都很简单。
grunt vs gulp
你可能听过grunt，grunt是基于node.js的构建工具
gulp是一个新的基于node.js的构建工具
grunt和gulp做同样的事。grunt出来更早，发展得也不错，可以找到很多的插件和资源，而且可以找到很多教程。这是一个很牛的工具，如果你已经很熟悉这个工具了，有哪些问题会让你替换掉它呢?
没有完美的工具，gulp.js被开发出来解决一些grunt无法解决的问题：
- grunt插件经常执行多个任务，gulp插件只做一件事
- grunt需要插件完成一些基本功能，如文件监听,gulp内置了基础功能
- grunt使用JSON格式的配置文件，gulp采用更精简，更简单的js代码来配置
不是每个人都觉得最后一条，gulp比grunt好，但建议查看一下gulp的演示幻灯片然后自己判断。
最重要的是gulp是基于流的概念。想想一下，你的文件通过一个管道，在沿着该管道的一个或多个点上一些操作被执行。（很像流水线）
例如我们可以把我们所有的js文件放到一个script管道，其中
- 合并为一个文件
- 删除调试代码
- 压缩代码
- 把生成的文件放到指定目录
数据输入到一个方法。该方法输出的新数据被下一个方法使用。这让人感觉很像jQuery的链式调用，例如
$("#element").text("hello world!").addClass("myclass").fadeIn();
理论讲完了，下面动手使用gulp吧。
第1步：安装Node.js
可以到官网下载你电脑系统对应的版本，具体怎么安装自己百度吧。
安装完成后，打开命令行，输入
node -v
如显示你当前安装的node版本。下面同样可以输入
npm -v
查看node.js的包管理器的版本信息。
如果哪个命令失败，检查一下你是不是命令输入错误了。如果没错，那更好，说明你node安装成功了。
第2步：安装gulp
使用npm安装gulp，需要添加-g标识把gulp安装到全局环境，可以在使其在任意项目中使用。
npm install gulp -g
如果使用的是mac或linux，需要在命令前加sudo，切换到管理员权限。
sudo npm install gulp -g
输入下面命令查看一下gulp是否安装成功
gulp -v
第3步：配置项目
举个例子，比如你的项目文件夹为test,首先切换到项目文件夹
cd test
根据不同的系统,window可以用dir,mac/linus用ls查看文件目录
我们的test文件夹，包括下面的子文件夹
-
src — the location of pre-processed HTML source files and folders:
- images — uncompressed images
- scripts — multiple pre-processed script files
- styles — multiple pre-processed CSS files
-
build — the location of production files for upload including:
- images — compressed images
- scripts — a single minified script file
- styles — a single minified CSS file
（build文件夹是我们的生成目录，是通过自动化任务生成的）
首先，在项目里安装gulp
npm install gulp --save-dev
这个命令会在test里创建用于存放gulp和它插件的node_modules文件夹
最后，在test文件夹里创建一个空的gulpfile.js配置文件。这里放我们要声明的任务。
第4步：安装第1个gulp插件
gulp不能自己就工作，你必须安装和配置插件来执行特定任务。首先安装jshint,用于检测我们的js源文件的质量。安装命令如下
npm install gulp-jshint --save-dev
打开gulpfile.js文件，添加以下代码
// include gulp var gulp = require('gulp'); // include plug-ins var jshint = require('gulp-jshint'); // JS hint task gulp.task('jshint', function() { gulp.src('./src/scripts/*.js') .pipe(jshint()) .pipe(jshint.reporter('default'));});
上面代码的意思是。
- 引用gulp
- 把gulp-jshint插件对象放到jshint变量中
- 声明一个新的gulp任务jshint。这个把所有在src/scripts内的js文件输入到jshint对象中，并把发现的错误输出到控制台。
保存gulpfile.js文件，并且在命令行运行任务，如下
gulp jshint
你会在控制台得到以下信息：
[gulp] Using file D:\test\gulpfile.js [gulp] Working directory changed to D:\test [gulp] Running 'jshint'... [gulp] Finished 'jshint' in 8.24 ms D:\test\src\scripts\lib.js: line 2, col 20, Missing semicolon. 1 error
第5步：添加其它任务
让我们多尝试一些插件。我们将查找src/images文件夹下，新图片或修改图片，把它们压缩并输出到build/images文件夹里。要做到这些，我们需要安装gulp-changed和gulp-imagemin两个插件。
npm install gulp-changed --save-dev npm install gulp-imagemin --save-dev
接下来在gulpfile.js文件中引用它们。
var changed = require('gulp-changed'); var imagemin = require('gulp-imagemin');
并且添加一个新gulp任务，用于执行插件
// minify new images gulp.task('imagemin', function() { var imgSrc = './src/images/**/*', imgDst = './build/images'; gulp.src(imgSrc) .pipe(changed(imgDst)) .pipe(imagemin()) .pipe(gulp.dest(imgDst));});
保存gulpfile.js，然后在命令行运行下面的命令
gulp imagemin
图片会被压缩并保存到生成目录对应的文件夹中，并且在控制台会得到下面的信息
[gulp] Using file D:\test\gulpfile.js [gulp] Working directory changed to D:\test [gulp] Running 'imagemin'... [gulp] Finished 'imagemin' in 5.71 ms [gulp] gulp-imagemin: ? battery.png (saved 2.7 kB) [gulp] gulp-imagemin: ? app.png (saved 3.2 kB) [gulp] gulp-imagemin: ? tick.png (saved 2.8 kB)
相同的方法，我们可以添加gulp-minify-html插件，用于压缩所有src下的html文件
npm install gulp-minify-html --save-dev
修改gulpfile.js文件，添加新任务htmlpage
// include plug-ins var minifyHTML = require('gulp-minify-html'); // minify new or changed HTML pages gulp.task('htmlpage', function() { var htmlSrc = './src/*.html', htmlDst = './build'; gulp.src(htmlSrc) .pipe(changed(htmlDst)) .pipe(minifyHTML()) .pipe(gulp.dest(htmlDst));});
保存gulpfile.js，然后测试一下html的压缩
gulp htmlpage
很简单吧？下面来使用一下js相关的插件，对源文件进行合并，压缩，去除调试代码的插件。
还是先安装
npm install gulp-concat --save-dev npm install gulp-strip-debug --save-dev npm install gulp-uglify --save-dev
在gulpfile.js添加一个新任务scripts
// include plug-ins var concat = require('gulp-concat'); var stripDebug = require('gulp-strip-debug'); var uglify = require('gulp-uglify'); // JS concat, strip debugging and minify gulp.task('scripts', function() { gulp.src(['./src/scripts/lib.js','./src/scripts/*.js']) .pipe(concat('script.js')) .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./build/scripts/'));});
这个例字中，我们使用一个数组给gulp.src方法传值。这样可以让js按照给定的顺序进行合并和压缩，可以解决一些依赖的问题。和上面一样，保存，然后运行任务
gulp scripts
最后让我们来处理一下css文件，使用添加浏览器前缀插件，压缩插件。
安装
npm install gulp-autoprefixer --save-dev npm install gulp-minify-css --save-dev
更新gulpfile.js文件
// include plug-ins var autoprefix = require('gulp-autoprefixer'); var minifyCSS = require('gulp-minify-css'); // CSS concat, auto-prefix and minify gulp.task('styles', function() { gulp.src(['./src/styles/*.css']) .pipe(concat('styles.css')) .pipe(autoprefix('last 2 versions')) .pipe(minifyCSS()) .pipe(gulp.dest('./build/styles/'));});
最后运行
gulp styles
给autoprefixer插件，传入以字符串或数组形式的浏览器支持配置，这里我们希望支持所有最新两个版本的浏览器。它会把每个属性按照caniuse.com里的数据进行对照，需要添加前缀则添加。可以避免每次去手工查询并添加对应前缀。
在这些例子中我们只是演示了几个有用的插件，你也可以自己到npmjs.org里去查找你需要的。其它一些有用的插件有：
- gulp-sass 一个node版本的css预处理器
- gulp-clean 可以用来移除没用的文件或文件夹
- gulp-file-include 用对应的文件替换对应的@@inclue('filename')
- gulp-size 日志文件和项目文件的大小
第6步：自动化任务
到现在为止，我们都是一次运行一个任务，gulp允许我们在一个任务中执行所有它依赖的子任务。下面在gulpfile.js中创建一个default任务
// default gulp task gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {});
然后在命令行运行下面命令
gulp
所有任务都是按照顺序执行。
但这样还是太麻烦了，每次都要执行。gulp可以使用watch方法来监听你的文件夹，如果有变化，会执行一个任务来完成。下面我们修改一下default任务，使其可以监听html,css,js,image文件的变化。
// default gulp task gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() { // watch for HTML changes gulp.watch('./src/*.html', function() { gulp.run('htmlpage'); }); // watch for JS changes gulp.watch('./src/scripts/*.js', function() { gulp.run('jshint', 'scripts'); }); // watch for CSS changes gulp.watch('./src/styles/*.css', function() { gulp.run('styles'); });});
现在我们再运行
gulp
程序会一直保持激活状态并在你改变文件时运行。你不再需要每次都运行任务了。
第7步：效果
使用上面的方法对项目进行处理，可以减少50%的页面体积。当你花上几个小时学习一下gulp，它比grunt学习起来容易。希望这个教程对你有用，并且可以让你动手去搭建一个自己的gulp构建工具。
相关链接：
原文：An Introduction to Gulp.js