搭建Gulp自动构建环境

前言

perl设计者在著作programming perl中提到:

优秀的程序员具有三大美德: 懒惰 急躁 和傲慢 ( laziness,Impatience.and Hubris)。

恩，第一就是懒，我十分认同。重复性工作全都应该交由机器去做。

于是在前端项目中，Gulp这种自动构建工具就应运而生了。

gulp通过定义任务，能完成前端项目的自动预处理、生成、部署等，甚至连刷新浏览器都省了，做到了“所见即所得”。

于是程序员能专注于coding，保存代码即可见到结果。

真是懒到极致了。

什么是Gulp

Gulp是一个自动化工具，前端开发者可以使用它来处理常见任务：

• 搭建web服务器
• 文件保存时自动重载浏览器
• 使用预处理器如Sass、LESS
• 优化资源，比如压缩CSS、JavaScript、压缩图片
  当然Gulp能做的远不止这些。如果你够疯狂，你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大，但你必须学会驾驭它。

安装gulp模块

使用npm安装gulp，以便以后能在终端使用gulp命令：

$ sudo cnpm install gulp -g

tip：安装淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm，提高模块下载速度：

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

创建gulp项目

创建package.json文件：

$ npm init

在 package.json 文件中指定项目依赖的包，以后可使用 npm install 命令一次性下载这些依赖包。
关于package.json详见：https://blog.csdn.net/u011240877/article/details/76582670

局部安装Gulp模块：

$ cnpm install gulp --save-dev

dependencies就是你程序运行需要的模块，没有这个模块你程序就会报错。
devDependencies是开发的时候需要的模块。
举个例子，你用angularjs框架开发一个程序，开发阶段需要用到gulp来构建你的开发和本地运行环境。所以angularjs一定要放到dependencies里，因为以后程序到生产环境也要用。gulp则是你用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，所以放到dev里就ok了。

创建gulpfile.js

var gulp = require('gulp'); //使用本地gulp模块

//任务模块
gulp.task('hi', function() {
    console.log('hello');
});

命令行执行：$ gulp hello，能看到：

[20:24:28] Starting 'hi'...
hello
[20:24:28] Finished 'hi' after 178 μ

写gulp任务

一般任务长这样：

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
    .pipe(aGulpPlugin()) // Sends it through a gulp plugin
    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

src输入源文件，pipe到插件处理后，输出到dest。

监视文件变动

监视文件变动代码如下：

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

或者使用通配符：

gulp.watch('app/scss/**/*.scss', ['sass']);

或者使用任务同时监听多组文件：

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  // Other watchers
})

使用livereload插件自动刷新浏览器

以监视html文件为例，一旦有变动，自动生成并刷新浏览器。

本地安装gulp-livereload

cnpm install gulp-livereload --save-dev

添加gulp任务

var gulp = require('gulp'),
    livereload = require('gulp-livereload');
 
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('src/html/*.html', function(event){
        livereload.changed(event.path);
    });
});

安装浏览器插件

安装chrome的livereload插件，可下载crx文件直接拖入浏览器安装。

以服务器方式打开页面

加载本地html文件无法触发livereload，必须以服务器方式加载。

这里使用node的超轻量级web服务器http-server。

安装http-server：cnpm install http-server -g

在html所在文件夹执行：$ http-server。

此时便能在http://localhost:8080/访问到页面。

运行livereload

1、执行gulp任务：$ gulp watch

2、点击Chrome地址栏右边livereload按钮变成实心圈，即为启用。

此时修改文件，浏览器即可自动刷新。

参考文章

gulp的使用以及Gulp新手入门教程