gulp

gulp是什么

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

什么是流

流，流水，把文件比作河流，那么一条河流流出，另一条河流流进，gulp对于文件流的操作就是这样，一个操作的输出结果作为另一个操作的输入，像这样：

//gulpfile.js
const uglify = require('gulp-uglify');

gulp.task('compass', function () {
    gulp.src(['js/*.js','!js/*.min.js']) 
        .pipe(uglify())
        .pipe(gulp.dest('javascript/'));	
});

这种操作有点类似jQuery的链式操作：$("").html(“gg”).css({}).parent().find(“a”).……
在使用流的时候，gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。

gulp的安装

npm install gulp -g
-g 指的是在全局作用域中安装，gulp命令行工具（gulp是基于node的，请确保node已安装）

gulp的基本API

gulp.task： 注册一个任务。

gulp.watch： 监听文件变化。可以在文件发生改动时候做一些事情。

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

gulp.dest： 写文件（输出）。
能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp本身不支持任何功能，只提供最基础的API，使用相关功能需要先引入插件。以下列举一些常用插件

常见的gulp插件

gulp-minify-css： css压缩
gulp-uglify： js压缩
gulp-minify-html： html压缩
gulp-jshint： js代码检查
gulp-concat： 文件合并
gulp-less： 编译Less
gulp-sass： 编译Sass
gulp-imagemin： 压缩图片
gulp-livereload： 自动刷新
gulp-connect： 创建本地服务器

插件的使用方式（以gulp-uglify 为例）

• 安装插件
  npm install --save-dev gulp-uglify
• 在gulpfile.js中引入插件

//gulpfile.js
const uglify = require('gulp-uglify');

• 在gulp工作流中使用插件

//gulpfile.js
gulp.task('compass', function () {
    gulp.src(['js/*.js','!js/*.min.js'])  //获取文件，同时过滤掉.min.js文件
        .pipe(uglify())
        .pipe(gulp.dest('javascript/'));	
});

具体的使用方式可查看插件的官网地址：https://www.npmjs.com/package/gulp-uglify
上Github也是可以找到相关使用说明的：https://github.com/terinjokes/gulp-uglify

gulp的基本使用

以下展示gulp的基本使用方式。其实关键部分就是配置gulpfile.js文件。一个完整的gulpfile.js文件的基本构成包括：①载入gulp核心；②载入插件； ②定义任务；③执行任务。而gulp具体做的事情就是定义在各个任务中。

创建一个gulp项目

• 创建一个项目目录，到项目根目录下打开cmd命令行，执行 npm init （gulp会依赖npm中的一些包，先配置一下npm的基础配置）
• 在本地安装gulp包，npm install gulp --save
  – save 指的是把gulp加到配置文件（package.json）中
• 在项目根目录创建一个gulpfile.js文件

// gulpfile.js

//载入gulp核心包
const gulp = require('gulp');

//载入插件
const sass = require('gulp-sass');

//定义任务

//编译scss的任务
gulp.task('sass',function(){
	gulp.src('./scss/*.scss')
		 .pipe(sass())
		 .pipe(gulp.dest('./css'));
})

• 运行gulp任务，在命令行执行 gulp taskName

参考链接：
Gulp中文网
前端自动化Gulp实际使用
前端自动化Gulp工具常用插件
常见构建工具及对比