前端工具系列之一 Gulp

从(大约)2014年开始,前端再也不是当初那个切图排版的前端了，各类MV*框架、库、工具呈井喷之势层出不穷。构建工具比较有名的如Grunt、Gulp、Yeoman、webpack；依赖管理好比bower、npm，固然最流行最广为人知的仍是做为Nodejs的管理器npm；模块化出现了CMD、AMD、UMD等，例如requirejs、seajs等的。

固然，许多技术、技术思惟等出现的时代甚至能够追溯至上个世纪。但进入大众视线，并逐步投产的时代却为时尚早。

做为一个怕麻烦的懒人，对于前端的繁杂工做固然是要找一个自动化工具来处理，因而我遇到了Gulp。做为自动化工具，Gulp常常被拿来和Grunt比较，孰优孰劣不能一律而论，毕竟每一个人关注的地方也不同。关于Gulp与Grunt的对比，网络上有许多总结好的特色，有兴趣的能够去搜索查看阅读，我在这里就不凑字数了。

要使用Gulp，首先要作的第一步固然是要安装她啦！Gulp是基于NodeJs的一个自动化构建工具，既然是基于NodeJs了，那么安装Gulp以前天然要保证你已经安装了NodeJS，这里我会从安装NodeJS开始。

我这里使用Ubuntu 16.04 LTS版本做为主机环境，其余版本的请自行注意差别。Windows相对Ubuntu来讲就更简单了，相信难不到你们。

首先咱们来安装NodeJS。Ubuntu下安装Linux有两种方案，一是采用APT安装，但此办法并无自动安装NPM，须要手动安装；第二种方案则是下载Nodejs源码，自行编译安装。这里采用懒省事的办法——APT。

sudo apt-get install nodejs-legacy npm

回车以后，输入密码，APT就会自动帮你把Nodejs、npm安装好了。当安装过程结束后回到命令指引时候，能够输入nodejs -v 和 npm -v 来检查安装结果。

注意：Ubutun中，NodeJS的包名有两个nodejs和nodejs-legacy,而不是node。

若是一切顺利，安装Gulp的前置步骤已经完成了。接下来咱们安装Gulp，Gulp是做为NodeJS的一个模块存在的，所以安装的时候要用到NPM。

sudo npm install -g gulp

这一步结束以后，Gulp安装就结束了。接下来就到了关键时刻啦，配置Gulp的task，Gulp虽然是自动化构建工具，但仍是须要咱们来给她指定task，让她安装咱们指定的task来工做，她还没聪明到猜想咱们要作什么、怎么作。

Gulp的API较之Grunt少的多，仅仅只有4个。

gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name [, deps] [, fn])
gulp.watch(glob [, opts], tasks) || gulp.watch(glob [, opts, cb])

依靠这4个API和众多的Gulp 插件，咱们就能实现许多咱们须要的功能。在编写Gulp任务以前，咱们首先要在当前目录安装Gulp。

sudo npm install --save-dev gulp

一切准备工做已经就绪，下面咱们就进入主题，咱们就来写一个简单的Gulp任务文件。
在当前目录建立一个空的文件，名字叫作gulpfile.js。

var gulp = require('gulp');

gulp.task('default', function(){
    console.log("task default done");    
});

将以上代码保存在gulpfile.js里。而后在命令行终端里进入当前目录,在命令行终端里输入gulp。gulp会自动查找当前目录中的gulpfile.js,而后分析gulpfile中的任务列表，命令行中若是没参数，则默认执行 default 任务，若是指定，则执行指定的任务。

正常状况下，将会在终端中看到

task default done

这行输出，而且还有每一个任务开始时间和结束时间。

以上就是一个简单的Gulp 任务，下面我会把我经常使用的配置发出来。我通常使用到的有几个功能。

1. SASS编译压缩

2. JS压缩

3. browerSync(改动文件自动刷新HTML和CSS、JS等)

gulpfile内容以下

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    cssMinify = require("gulp-cssnano"),
    browserSync = require('browser-sync').create(),
    compass = require('gulp-compass'),
    paths = {
        scripts: ['js/*.js'],  // JS文件路径
        css: 'sass/*.scss', // scss 文件路径
    };

gulp.task('scripts', function() {
    return gulp.src(paths.scripts) // 读取JS文件
        .pipe(uglify()) // 压缩
        .pipe(gulp.dest('script/'))  //将压缩后的文件保存到 script目录
        .pipe(browserSync.stream()); // 通知browserSync 重载 JS文件
});

gulp.task("css", function() {
    return gulp.src(paths.css)  // 读取SCSS文件
        .pipe(compass({
            sass: 'sass',
            image: 'images'
        })) // 进行编译处理
        .pipe(cssMinify()) // 压缩CSS文件
        .pipe(gulp.dest('css/')) // 发布到css 目录
        .pipe(browserSync.stream()); // 通知browserSync刷新CSS文件
});

// 注册serve 任务，serve任务依赖scrips 和 css 两个任务
gulp.task('serve', ['scripts', "css"], function() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch(paths.scripts, ["scripts"]);
    gulp.watch(paths.css, ["css"]);
    gulp.watch("*.html").on("change", browserSync.reload);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['serve']);  // 将serve 任务注册为默认任务。

在这个任务清单中，须要依赖如下插件。

gulp-uglify
gulp-cssnano
browser-sync
gulp-compass

在使用中，直接进入到当前目录中，在终端中运行gulp,将会启动一个http服务，而且打开浏览器窗口。

服务启动后，不管你修改CSS、JS仍是HTML，都会自动编译压缩而且自动刷新HTML(若是须要，修改CSS、JS是不须要刷新整个页面，只会从新加载CSS、JS)。

好了，乱七八糟的这个Gulp教程到这里算是马马虎虎的收尾了。其实Gulp 仍是蛮强大的，仍是有许多内容没提到的，Gulp的API、插件的API这些都没有去讲解，去看一下文档你们应该就明白了。

固然，这个配置仍是有不足的，Gulp官方推荐的一些最佳实践都没应用到，甚至一些功能也没有完成，好比图片压缩、公用模板引用。

图片压缩能够去查看一下gulp-imagemin,公共模板引用gulp-content-includer。