干了这杯可乐！Gulp 上手指南

导读：有关Gulp的入门教程不少，大同小异。本文主要对它们进行内容上的梳理和引导。

What is Gulp?

对网站资源进行优化，并使用不一样浏览器测试并非网站设计过程当中最有意思的部分，可是这个过程当中的不少重复的任务可以使用正确的工具自动完成，从而使效率大大提升，这是让不少开发者以为有趣的地方。

Gulp 是一个构建系统，它能经过自动执行常见任务，好比编译预处理 CSS，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程。Gulp 是基于 Node.js 构建的，所以 Gulp 源文件和你用来定义任务的 Gulp 文件都被写进了 JavaScript（或者 CoffeeScript）里。前端开发工程师还能够用本身熟悉的语言来编写任务去 lint JavaScript 和 CSS、解析模板以及在文件变更时编译 LESS 文件（固然这些只是一小部分例子）。

Building With Gulp - SMASHING MAGAZINE

Gulp vs Grunt

Grunt 的特色

• Grunt 有一个完善的社区，插件丰富

• 它简单易学，你能够随便安装插件并配置它们

• 你不须要多先进的理念，也不须要任何经验

Gulp 和 Grunt 的异同点

• 易于使用：采用代码优于配置策略，Gulp 让简单的事情继续简单，复杂的任务变得可管理

• 高效：经过利用 Node.js 强大的流，不须要往磁盘写中间文件，能够更快地完成构建

• 高质量：Gulp 严格的插件指导方针，确保插件简单而且按你指望的方式工做

• 易于学习：经过把API降到最少，你能在很短的时间内学会 Gulp，构建的工做就像你预想的同样：是一系列流管道。

Gulp vs Grunt - benben

Grunt 之殇

• 插件很难遵照单一责任原则

• 用插件作一些原本不须要插件来作的事情

• 试图用配置文件完成全部事，结果就是混乱不堪

• 落后的流程控制产生了让人头痛的临时文件/文件夹所致使的性能滞后

Gulp 之道

• 使用 Gulp，你的构建脚本是代码，而不是配置文件

• 使用标准库（node.js standard library）来编写脚本

• 插件都很简单，只负责完成一件事（基本上都是20行左右的函数）

• 输入 / 输出（I/O）是基于“流式”的

"流式"前端构建工具——gulp.js 简介 - SegmentFault

Getting Started

第一步：安装Node

Node.js 官网

]

第二步：使用命令行

为了确保 Node 已经正确安装，可经过查看版本号来检验，以下。

node -v
npm -v

第三步：定位到项目

Linux、OSX的终端（Terminal）

cd 定位到目录
ls 获取文件列表

Windows中的命令提示符（Command Prompt）
定位到目录

盘符: 例如进入D盘 d:
cd 进入当前盘符某个目录
cd \ 进入当前盘根目录
cd \windows 进入当前盘windows目录
cd ..  退到上一级目录

（注：进入含有特殊字符目录时须要加引号。例如：cd "c:\program files"。）

获取文件列表

dir /b

成功进入项目目录后，咱们开始安装Gulp。

第四步：安装 Gulp

NPM 是基于命令行的 node 包管理工具，它能够将 node 的程序模块安装到项目中，，在它的 官网 中能够查看和搜索全部可用的程序模块。

在命令行中输入

sudo npm install -g gulp

说明：

1. sudo 是管理员身份执行命令，通常会要求输入电脑密码

2. npm 是安装 node 模块的工具，执行 install 命令

3. -g 表示在全局环境安装，以便任何项目都能使用它

4. 最后，gulp 是将要安装的 node 模块的名字

运行时注意查看命令行有没有错误信息，安装完成后，可使用下面的命令查看 gulp 的版本号以确保gulp已经被正确安装。

gulp -v

接下来，咱们须要将gulp安装到项目本地

npm install --save-dev gulp

说明：

1. 使用--save-dev来更新 package.json 文件，更新 devDependencies 值，以代表项目须要依赖gulp；

2. dependencies能够向其余参与项目的人指明项目在开发环境和生产环境中的 node 模块依赖关系。想要深刻了解能够查看 package.json 文档。

前端构建工具gulp入门教程 - SegmentFault

第五步：新建 Gulpfile 文件，运行 Gulp

安装好 gulp 后咱们须要告诉它要为咱们执行哪些任务。因此，咱们首先须要弄清楚项目须要哪些任务。
例如：

• 检查JavaScript（gulp-jshint）

• 合并JavaScript(gulp-concat)

• 压缩并重命名合并后的JavaScript(gulp-ugligy、gulp-rename)

1.安装依赖

根据上面的任务需求，咱们安装相应的插件。

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

官方 Plugin 库

2.新建gulpfile文件

插件安装完毕后，咱们须要新建一个gulpfile.js文件来指定gulp须要为咱们完成什么任务。

3.引入插件

// 引入 gulp
var gulp = require('gulp'); 

// 引入插件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

4.建立任务

// 语法检查
gulp.task('jshint', function() {
    gulp.src('project/src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合并文件以后压缩代码
gulp.task('minify', function(){
    gulp.src('project/src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('project/dist/js'))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest('project/dist/js'))
});

// 监视文件的变化
gulp.task('watch', function(){
    gulp.watch('project/src/js/*.js', ['jshint', 'minify']);
});

// 默认任务
gulp.task('default', ['jshint', 'minify', 'watch']);

Gulp入门 - SegmentFault

5.运行gulp

回到命令行，就能够直接运行gulp任务了。

gulp

这将执行定义的default任务，即跟下面的命令做用相同。

gulp default

固然，咱们能够运行gulpfile.js中定义的任意任务，好比，如今运行scripts任务：

gulp minify

官方 API 文档

More

Gulp 4.0 前瞻 - SegmentFault
Gulp思惟——Gulp高级技巧 - SegmentFault

以上，欢迎拍砖斧正。