Gulp-构建工具 相关内容整理

Gulp- 简介

Automate and enhance your workflow | 用自动化构建工具加强你的工做流程

Gulp 是什么？

gulp是前端开发过程当中一种基于流的代码构建工具，是自动化项目的构建利器；它不只能对网站资源进行优化，并且在开发过程当中不少重复的任务可以使用正确的工具自动完成；
使用它，不只能够很愉快的编写代码，并且大大提升咱们的工做效率。

gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操做系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操做上很是简单。经过本文，咱们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 很是相似，但相比于 grunt 的频繁 IO 操做，gulp 的流操做，能更快地更便捷地完成构建工做。

Gulp的核心概念？

流，简单来讲就是创建在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操做，如读取数据，写入数据等，程序员是对流进行全部操做的，而不用关心流的另外一头数据的真正流向。流不但能够处理文件，还能够处理动态内存、网络数据等多种数据形式。

而gulp正是经过流和代码优于配置的策略来尽可能简化任务编写的工做。这看起来有点“像jQuery”的方法，把动做串起来建立构建任务。早在Unix的初期，流就已经存在了。流在Node.js生态系统中也扮演了重要的角色，相似于*nix将几乎全部设备抽象为文件同样，Node将几乎全部IO操做都抽象成了stream的操做。所以用gulp编写任务也可看做是用Node.js编写任务。当使用流时，gulp去除了中间文件，只将最后的输出写入磁盘，整个过程所以变得更快。

Gulp的特色?

• 易于使用:
  经过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。
• 构建快速:
  利用 Node.js 流的威力，你能够快速构建项目并减小频繁的 IO 操做。
• 易于学习:
  经过最少的 API，掌握 gulp 绝不费力，构建工做尽在掌握：如同一系列流管道。
• 插件高质:
  gulp 严格的插件指南确保插件如你指望的那样简洁高质得工做。

Gulp- 环境搭建

gulp 是基于 node 实现的，那么咱们就须要先安装 node。

Node是一个基于Google V8 JavaScript引擎创建的一个平台，能够利用它实现Web服务，作相似PHP的事。

npm install -g gulp  # 全局安装gulp 
gulp -v  # 查看gulp是否安装成功

➜  ~ gulp -v
   [20:17:32] CLI version 3.9.1

Gulp- 构建项目

使用Gulp来构建项目:

mkdir Gulp && cd Gulp && npm init -y && npm install gulp --save-dev
#使用npm初始化项目而且安装Gulp模块,可以看到以下的package.json文件中已经包含了Gulp的相关信息。
{
  "name": "Gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpfile.js文件的使用：

gulp也须要一个文件做为它的主文件，在gulp中这个文件叫作gulpfile.js。

建立gulpfile.js文件，与package.json文件同样放在项目根目录中，以后须要作的就是在gulpfile.js文件中定义任务了。

在gulpfile.js文件中写入如下内容：

var gulp = require('gulp');
    gulp.task('default', function() {
      console.log("Gulp OK!");
    });

完成以后在Terminal中运行gulp命令，而后会看到刚才在task任务中要输出的内容.

➜  gulp
[00:35:29] Using gulpfile ~/WebStrom-Work/Gulp/gulpfile.js
[00:35:29] Starting 'default'...
Gulp OK!
[00:35:29] Finished 'default' after 141 μs

Gulp- API

gulp.src()

语法：

gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它能够被 piped 到别的插件中。

名称	类型	含义
globs	String 或 Array	所要读取的 glob 或者包含 globs 的数组。
options	Object	经过 glob-stream 所传递给 node-glob 的参数。

gulp.dest()

语法：

gulp.dest(path[, options])

能被 pipe 进来，而且将会写文件。而且从新输出（emits）全部数据，所以你能够将它 pipe 到多个文件夹。若是某文件夹不存在，将会自动建立它。

• path 类型： String or Function ,文件将被写入的路径（输出目录）。也能够传入一个函数，在函数中返回相应路径，这个函数也能够由 vinyl 文件实例 来提供。

• options
  类型： Object , 为一个可选的参数对象，一般咱们不须要用到

gulp.task()

语法：

gulp.task(name[, deps], fn)

• name
  类型： String，任务的名字，若是你须要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

• deps
  类型： Array，一个包含任务列表的数组，这些任务会在你当前任务运行以前完成。
  $xslt demo gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // 作一些事 });
  注意： 你的任务是否在这些前置依赖的任务完成以前运行了？请必定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

• fn
  该函数定义任务所要执行的一些操做。一般来讲，它会是这种形式：gulp.src().pipe(someplugin())。

gulp.watch()

语法：

gulp.watch(glob[, opts], tasks)

gulp.watch()用来监视文件的变化，当文件发生变化后，咱们能够利用它来执行相应的任务。

• glob类型： String or Array ,一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变更。

• opts 类型： Object

传给 gaze 的参数。

• cb(event)
  类型： Function ,每次变更须要执行的 callback。

参考：Gulp-API

Gulp- 经常使用插件

压缩JS -> gulp-uglify:

安装 gulp-uglify:

npm install gulp-uglify --save-dev

示例代码：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('javascript',function () { // javascript: 任务名称
    gulp.src('./src/js/*.js')  // src: 定位到须要压缩的js文件目录下
        .pipe(uglify()) // 执行压缩文件
        .pipe(gulp.dest('./dist/js')); // 输出到指定目录
});

API参考：gulp-uglify

压缩CSS -> gulp-minify-css:

安装 gulp-minify-css：

npm install gulp-minify-css --save-dev

示例代码：

var gulp = require('gulp');
var minify = require('gulp-minify-css')

gulp.task('css',function () {
    gulp.src('./src/css/*.css')
    .pipe(minify())
    .pipe(gulp.dest('./dist/css'));
});

API参考：gulp-minify-css

压缩图片 -> gulp-imagemin：

安装 gulp-imagemin：

npm install gulp-imagemin --save-dev

示例代码：

var gulp = require('gulp');
var image = require('gulp-imagemin');

gulp.task('image',function () {
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

API参考：gulp-imagemin

编译Less-> gulp-less:

安装 gulp-less：

npm install gulp-less --save-dev

示例代码：

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less',function () {
    gulp.src('./src/less/*.*')
        .pipe(less())
        .pipe(gulp.dest('./dist/less'));
});

API参考：gulp-less

自动刷新-> gulp-livereload：

安装gulp-livereload：

npm install gulp-livereload --save-dev

示例代码：

在每一个gulp.task()方法中的gulp.src()方法后追加   .pipe(livereload());    便可。

须要配合谷歌浏览器插件 LiveReload插件来使用，实现自动刷新。

API参考：gulp-livereload

Google Chrome Plugin：LiveReload

完整gulpfile.js文件：

var gulp = require('gulp'); // Gulp
var uglify = require('gulp-uglify');  // JavaScript
var minify = require('gulp-minify-css'); // CSS
var imagemin = require('gulp-imagemin'); // Images
var less = require('gulp-less'); // Less
var livereload = require('gulp-livereload') // LiveReload

// 执行全部任务
gulp.task('default', ['javascript','css','less','image']);

gulp.task('javascript',function () { // jsscript: 任务名称
    gulp.src('./src/js/*.js')  // src: 定位到须要压缩的js文件目录下
        .pipe(uglify()) // 执行压缩文件
        .pipe(gulp.dest('./dist/js')); // 输出到指定目录
});



gulp.task('css',function () {
    gulp.src('./src/css/*.css')
        .pipe(minify())
        .pipe(gulp.dest('./dist/css'));
});

gulp.task('less',function () {
    gulp.src('./src/less/*.*')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'));
});


gulp.task('image',function () {
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

Gulp- 参考资料

• Gulp官网
• Gulp中文网
• 一点CSS-Gulp
• npmjs Gulp-插件
• Gulp经常使用插件介绍
• Gulp使用介绍和技巧
• Thenewboston-视频教程

常见web项目目录：

在当前项目的根目录下执行tree命令，便可看到项目的整个目录结构，若是没有tree命令，在Mac系统下可使用brew进行安装：

➜  Glup tree ../Glup
../Glup

├── build # 项目构建脚本
├── src # 源码目录
│   ├── css # CSS文件
│   ├── fonts # 字体文件
│   ├── images # 图片文件
│   ├── js # js脚本文件
│   ├── less # less文件
│   └── sass # sass文件
├── dist # 编译出来的发布版本目录
│   ├── css 
│   ├── fonts
│   ├── images
│   └── js 
├── docs # 文档
├── test # 测试脚本
├── gulpfile.js # Gulp工具构建项目的主文件
├── node_modules # npm包存放目录
├── package-lock.json #npm5.0以上项目依赖文件
├── package.json # npm包管理配置文件
├── LICENSE # 受权协议
└── README.md # 项目说明文件