前端工具系列之一 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 任务，下面我会把我常用的配置发出来。我一般使用到的有几个功能。

SASS编译压缩
JS压缩
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。

前端工具系列之一 Gulp

你可能感兴趣的:(javascript,node.js)