Gulp

Gulp 简介

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

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

P2 安装

可替换淘宝镜像：npm install cnpm -g --registry=https://registry.npm.taobao.org

2.1 全局安装 gulp：

$ npm install -g gulp

查看是否正确安装：命令提示符执行gulp -v，出现版本号version 3.9.1即为正确安装。 如果显示'glup' 不是内部或外部命令，也不是可运行的程序或批处理文件。，请确定你是否打对字，是gulp，而不是glup！！！这里我故意打错字你也发现不了。

2.2 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

P3 Gulp API整理

gulp只有四个API： task，watch，src，和 dest

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

name：任务名;

deps：StringArray(可选)，一个包含任务列表的数组，这些任务会在你当前任务运行之前完成;

fn：任务操作函数function() {}.

//执行完one, two, three任务后再执行four gulp.task('four', ['one', 'two', 'three'], function() { return gulp.src(path) .pipe(someplugin()); //或其他事 });

3.2 gulp.src(globs[, options])

src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件；

globs：String 或 Array，需要处理的源文件匹配符路径

通配符路径匹配:

src/a.js：指定具体文件

*：匹配所有文件 src/*.js(包含src下的所有js文件)

**：匹配0个或多个子文件夹 src/**/*.js(包含src的0个或多个子文件夹下的js文件)；

{}：匹配多个属性 src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

!：排除文件 !src/a.js(不包含src下的a.js文件)；

var gulp = require('gulp'), less = require('gulp-less'); gulp.task('testLess', function () { //gulp.src('less/test/style.less') gulp.src(['less/**/*.less','!less/{extend,page}/*.less']) .pipe(less()) .pipe(gulp.dest('./css')); });

options： (可选) Object，有3个属性buffer、read、base

options.buffer：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

options.read：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；

options.base：String 设置输出路径以某个路径的某个组成部分为基础向后拼接，具体看下面示例：

gulp.src('client/js/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); // Writes 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base: 'client' }) .pipe(minify()) .pipe(gulp.dest('build')); // Writes 'build/js/somedir/somefile.js'

异步任务支持 只有当fn接受一个 callback，或者返回一个 promise 或 stream任务 才可以异步执行,且task默认以最大的并发数执行，即gulp 会一次性运行所有的 task 并且不做任何等待。

//接受一个 callback var exec = require('child_process').exec; gulp.task('jekyll', function(cb) { // 编译 Jekyll exec('jekyll build', function(err) { if (err) return cb(err); // 返回 error cb(); // 完成 task }); }); //返回一个 stream gulp.task('somename', function() { var stream = gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); return stream; }); //返回一个 promise var Q = require('q'); gulp.task('somename', function() { var deferred = Q.defer(); // 执行异步的操作 setTimeout(function() { deferred.resolve(); }, 1); return deferred.promise; });

当然，如果你想要任务按照一定的顺序执行。例如有两个task，"one" 和 "two"，在 "one" 中返回一个cb，或stream，promise，让系统知道什么时候它会执行完毕; 在 "two" 中添加提示告诉系统 "two" 需要依赖 "one" 完成，即下面给出的栗子:

var gulp = require('gulp'); // 返回一个 callback，因此系统可以知道它什么时候完成 gulp.task('one', function(cb) { // 做一些事 -- 异步的或者其他的 cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了 }); // 定义一个所依赖的 task 必须在这个 task 执行之前完成 gulp.task('two', ['one'], function() { // 'one' 完成后 }); gulp.task('default', ['one', 'two']);

3.3 gulp.dest(path[, options])

dest方法是指定处理完后文件输出的路径

path：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可

options：Object，有2个属性cwd、mode

options.cwd：String 默认：process.cwd()：当前脚本的工作目录的路径 当文件输出路径为相对路径将会用到

options.mode：String 默认：0777 指定被创建文件夹的权限

3.4 gulp.watch(glob [, opts], tasks)orgulp.watch(glob [, opts, cb])

watch方法是用于监听文件变化，文件一修改就会执行指定的任务

glob： String or StringArray 需要处理的源文件匹配符路径。

opts： Object(可选) 具体参看 gaze；

tasks： StringArray 需要执行的任务的名称数组；

cb(event)： Function() 每次文件变化执行的回调函数；

event.type: String 发生的变动的类型：added, changed 或者 deleted

event.path: String 触发了该事件的文件的路径。

P4 新建gulpfile.js文件

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）

我们将要使用Gulp插件来完成我们以下任务：

sass的编译（gulp-sass）

自动添加css前缀（gulp-autoprefixer）

压缩css（gulp-minify-css）

js代码校验（gulp-jshint）

合并js文件（gulp-concat）

压缩js代码（gulp-uglify）

压缩图片（gulp-imagemin）

自动刷新页面（gulp-livereload）

图片缓存，只有图片替换了才压缩（gulp-cache）

更改提醒（gulp-notify）

修改文件名（gulp-rename）

安装这些插件需要运行如下命令：

npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev //成功安装后在package.json中出现版本信息 { "devDependencies": { "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-cache": "^0.4.6", "gulp-concat": "^2.6.1", "gulp-imagemin": "^3.2.0", "gulp-jshint": "^2.0.4", "gulp-livereload": "^3.8.1", "gulp-minify-css": "^1.2.4", "gulp-notify": "^3.0.0", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglify": "^2.1.2" } }

更多插件请点这里 gulp.js插件

4.1 加载插件：

// Load plugins var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload');

4.2 建立任务：

4.2.1 编译sass、自动添加css前缀和压缩

首先我们编译sass，添加前缀，保存到我们指定的目录下面，还没结束，我们还要压缩，给文件添加 .min 后缀再输出压缩文件到指定目录，最后提醒任务完成了：

// Styles任务 gulp.task('styles', function() { //编译sass return gulp.src('stylesheets/main.scss') .pipe(sass()) //添加前缀 .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) //保存未压缩文件到我们指定的目录下面 .pipe(gulp.dest('stylesheets')) //给文件添加.min后缀 .pipe(rename({ suffix: '.min' })) //压缩样式文件 .pipe(minifycss()) //输出压缩文件到指定目录 .pipe(gulp.dest('assets')) //提醒任务完成 .pipe(notify({ message: 'Styles task complete' })); });

4.2.2 js代码校验、合并和压缩

// Scripts任务 gulp.task('scripts', function() { //js代码校验 return gulp.src('javascripts/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) //js代码合并 .pipe(concat('all.js')) //给文件添加.min后缀 .pipe(rename({ suffix: '.min' })) //压缩脚本文件 .pipe(uglify()) //输出压缩文件到指定目录 .pipe(gulp.dest('assets')) //提醒任务完成 .pipe(notify({ message: 'Scripts task complete' })); });

4.2.3 图片压缩

// Images gulp.task('images', function() { return gulp.src('images/*') .pipe(cache(imagemin({ optimizationLevel: 3, //类型：Number默认：3取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化 }))) .pipe(gulp.dest('images')) .pipe(notify({ message: 'Images task complete' })); });

4.2.4 事件监听

// Watch gulp.task('watch', function() { // Watch .scss files gulp.watch('stylesheets/*.scss', ['styles']); // Watch .js files gulp.watch('javascripts/*.js', ['scripts']); // Watch image files gulp.watch('images/*', ['images']); // Create LiveReload server livereload.listen(); // Watch any files in assets/, reload on change gulp.watch(['assets/*']).on('change', livereload.changed); });

4.2.5 定义默认任务

栗子里的第二个参数是一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

gulp.task('default', ['styles', 'scripts', 'images', 'watch'], function() { console.log('Everthing is done!'); });

P5 运行gulp

5.1 命令提示符执行

命令提示符执行gulp 任务名称, 如gulp styles

当执行gulp default或gulp将会调用default任务里的所有任务

5.2 使用WebStorm运行gulp任务

将项目导入WebStorm，右键gulpfile.js 选择“Show Gulp Tasks”打开Gulp窗口，若出现“No task found”，选择右键”Reload tasks”，双击运行即可。

参考文档

一点gulp API 文档前端构建工具gulp入门教程1前端构建工具gulp入门教程2

转载于:https://www.cnblogs.com/mapleChain/p/11528016.html

相关资源：微信小程序源码-合集4.rar