Gulp,一个基于流的构建工具。

这是自己写的一个构建的demo,只是一个纯演示的示例,并没有完成什么项目工作。下面根据这个demo介绍一下Gulp。

上代码:

gulpfile.js

'use strict';

/**
* 环境
*/ const env = process.argv.slice(6)[0] || 'development';
process.env.NODE_ENV = env;
const isDev = env == 'development'; /**
* 依赖
*/
const browserSync = require('browser-sync');
const reload = browserSync.reload; const watchify = require('watchify');
const browserify = require('browserify');
const babelify = require('babelify');
const envify = require('envify/custom'); const del = require('del');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const gulp = require('gulp');
const $ = require('gulp-load-plugins')(); /**
* path
*/
const pathConf = require('./path.js');
const path = pathConf.path;
const filePath = pathConf.filePath; /**
* browserify & watchfy
*/
// browserify conf
const customOpts = {
entries: ['./src/main.js'],
debug: true
}; // watchfy conf
const opts = Object.assign({}, watchify.args, customOpts);
// init watchfy
const browserify_watch = watchify(browserify(opts));
browserify_watch.transform(babelify, {
presets: ["es2015", "stage-2"],
plugins: ["transform-runtime"]
});
browserify_watch.transform(envify({
NODE_ENV: env
})); function jsBundler (ids){
return browserify_watch
.bundle()
.on('error', $.util.log)
.pipe(source("build.js"))
.pipe(buffer())
.pipe($.if(isDev, $.sourcemaps.init({loadMaps: true})))
.pipe($.uglify())
.pipe($.if(isDev, $.sourcemaps.write(".")))
.pipe(gulp.dest(path.dist))
} browserify_watch.on('update', jsBundler);
browserify_watch.on('log', $.util.log); /**
* gulp task
*/
gulp.task('cleanAll', () => {
del([
path.temp + '**/.{html.js.css}',
path.dist + '**/.{html.js.css}',
'!' + path.dist + 'video/**'
]);
}); gulp.task('serve', () => {
browserSync({
server: {
// proxy: 'xx.xx.xx.xx',
baseDir: __dirname
}
});
}); gulp.task('jsBundle', jsBundler); gulp.task('less', () => {
return gulp.src(filePath.src_less)
.pipe($.less())
.on("error", function (error){
$.util.log(error);
this.emit("end");
})
.pipe(gulp.dest(path.temp + 'css/'));
}); gulp.task('cssBundle', ['less'], () => {
return gulp.src([filePath.temp_css])
.pipe($.if(isDev, $.sourcemaps.init({loadMaps: true})))
.pipe($.concat('build.css'))
.pipe($.minifyCss())
.pipe($.if(isDev, $.sourcemaps.write('.')))
.pipe(gulp.dest(path.dist));
}); gulp.task('watchLess', () => {
gulp.watch([filePath.src_less], ['cssBundle']);
}); gulp.task('watchDist', () => {
gulp.watch(['index.html', path.dist + '*.*'], reload);
}); /**
* cli
* '$ gulp build' for development
* '$ npm run dev' for development
* '$ npm run pro' for production
*/
gulp.task('build', $.sequence(
'cleanAll'
, ['jsBundle', 'cssBundle']
, ['watchLess', 'watchDist']
, 'serve'
));

package.json

{
"name": "gulp",
"description": "gulp",
"author": "james",
"scripts": {
"dev": "gulp build --gulpfile gulpfile.js --env development",
"pro": "gulp build --gulpfile gulpfile.js --env production"
},
"dependencies": {
"jquery": "^3.1.1"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-stage-2": "^6.17.0",
"babel-preset-stage-3": "^6.17.0",
"babel-runtime": "^6.11.6",
"babelify": "^7.3.0",
"browser-sync": "^2.17.3",
"browserify": "^13.1.0",
"del": "^2.2.2",
"envify": "^3.4.1",
"gulp": "^3.9.1",
"gulp-changed": "^1.3.2",
"gulp-concat": "^2.6.0",
"gulp-debug": "^2.1.2",
"gulp-filter": "^4.0.0",
"gulp-if": "^2.0.1",
"gulp-inject": "^4.1.0",
"gulp-jshint": "^2.0.1",
"gulp-less": "^3.1.0",
"gulp-load-plugins": "^1.3.0",
"gulp-minify-css": "^1.2.4",
"gulp-minify-html": "^1.0.6",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-rev-all": "^0.9.7",
"gulp-sequence": "^0.4.6",
"gulp-sourcemaps": "^2.0.1",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
}
}

文件结构如下:

结构说明:

main.js 为入口文件

path.js 定义了一些路径变量

src 文件夹存放原始代码

dis 文件夹存放打包后的代码

temp 文件夹存放零食文件

通过browserify转译commjs和es6语法,通过gulp-less转译less语法,把转译后的文件输出到dist文件夹。

下面通过一些主要代码介绍一下Gulp的工作方式:

先看这段代码:

function jsBundler (ids){
return browserify_watch
.bundle()
.on('error', $.util.log)
.pipe(source("build.js"))
.pipe(buffer())
.pipe($.if(isDev, $.sourcemaps.init({loadMaps: true})))
.pipe($.uglify())
.pipe($.if(isDev, $.sourcemaps.write(".")))
.pipe(gulp.dest(path.dist))
}

它主要是在watchify监听到依赖的js文件有变动之后,会自动调用的一个回调函数。函数内部实现步骤为:

1.通过browserify以main.js为入口文件,打包依赖的所有js,并通过browserify的es2015预设插件来转译es6语法。最后将生成的流通过管道传输给vinyl-source-stream这个插件

2.普通流通过vinyl-source-stream处理以后再传输给vinyl-buffer

3.vinyl-buffer处理以后的流再传输给gulp-sourcemaps插件(如果环境条件判断通过的话),生成原始文件和打包后的文件映射关系(便于调试)

4.再传输给gulp-uglify插件进行压缩和混淆

5.输出soucemap

6.输出打包后的js文件到dist文件夹

看到这个流程不免有些疑问:为啥browserify传输出流不能直接给gulp插件使用呢,要先通过vinyl插件的系列处理才可以?

原因是:browserify处理后输出的流只是普通的node.js流,gulp的插件需要的是经过处理的vinyl流。vinyl可以把普通的node.js的流转换为Vinyl File Object Stream。这样,相当于把普通的流接入到了Gulp的处理体系内。如果需要完整流,可以通过vinyl-buffer插件接收完整个流转成二进制数据以后再进行处理,通常gulp-soucemaps、gulp-uglify这些需要完整文件进行映射或者替换的插件都需要buffer一次。否则在任务运行的时候会报流不支持的错误:

vinyl流的特点是它是Object风格的,除了流的内容content,还有path等属性。记录了文件的内容和文件名、文件路径的信息。

一个很好的例子可以解释为什么需要这样:

gulp.task("css", () => {
gulp.src("./src/**/*.css")
.pipe(gulp.dest("./dist/css/"));
});

这个Gulp任务很简单,就是把src文件夹下面所有的css(无论子文件夹层级)都'搬运"到./dist/css/这个路径下。任务执行结果当然表明这是一次成功的搬运。

单仔细看看不难发现一个蹊跷的事情:./src/下的文件夹是不定的,可以是很多层,也可以只有一层,每个css文件可以是任何名字,那么在dest到./dist/css/还能对应上文件夹层级和文件名,这是怎么做到的呢?

其实就是通过vinyl流(对象)的path那些属性来知道文件夹层级和文件名的。普通的node.js流只传输String或Buffer类型,也就是只关注content。

Gulp不只用到了文件的内容,而且还用到了这个文件的相关信息。因此,vinyl流就会有contents、path这样的多个属性了。

但是Gulp本身并不能直接生成vinyl流对象,而是依赖了一个叫做vinyl-fs的node模块,这是一个类似于文件适配器的模块。它提供三个方法:.src()、.dest()和.watch(),其中.src()将生成vinyl流对象,而.dest()将使用vinyl流,进行写入操作。

在Gulp的包中可以看到源码:

var vfs = require('vinyl-fs');

// ...

Gulp.prototype.src = vfs.src;
Gulp.prototype.dest = vfs.dest; // ...

可以看到gulp的src和dest方法其实就是vinyl-fs的src和dest方法。

深入探究之后可以发现这么一条依赖关系:gulp -> vinyl-fs ->vinyl -> glob-stream -> node-glob

从gulp.src开始到gulp.dest结束这一系列的工作流程大概是这样的:

  首先通过node-glob来匹配路径和文件,然后glob-stream把匹配到的文件流式读取, 再通过vinyl输出Gulp体系需要用到的vinyl流对象,src完成工作后 流被pipe下去,直到gulp.dest时候,通过先前已知的文件路径和文件名进行写入操作。

如果是从webpack/browserify的普通流开始,会有它们自己的一套文件流失读取方式和输出,只要通过vinyl改造后输出vinyl流对象就能接入进Gulp体系。

值得注意的是:写入是一个异步的操作。任务结束以后,不一定表示文件已经全部写入!

Gulp比起Grunt更具的node.js风格, 而且其依赖的orchestrator的特性就是最大并发的执行任务。在提供了大并发和node.js异步操作特性的同时也带来了不好的一点:链式任务不好控制。

这也是为什么build这个task是通过gulp-sequence来严格按照既定顺序执行的(通过返回流和其他异步处理的方式也可以达到效果):

gulp.task('build', $.sequence(
'cleanAll'
, ['jsBundle', 'cssBundle']
, ['watchLess', 'watchDist']
, 'serve'
));

我们一定不会希望这类事情发生:一边写入文件一边又在删除;下一个任务需要上个任务提供必要文件,但在执行的时候文件还没有写入完;等等....

Gulp常被用于和老前辈Grunt相比较,一般都说Gulp的速度快,这其实只是Gulp基于管道流的处理速度相对于Grunt不停地生成临时文件要快。读取和写入(I/O)操作还要看机器自身情况。

Gulp意为"狼吐虎咽",即拥有基于流的快速与支持高并发的特性。

gulp思考的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. [译]为什么我要离开gulp和grunt转投npm脚本的怀抱

    原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855 ...

  3. gulp使用小结(二)

    接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...

  4. gulp使用小结(一)

    这篇文章不会介绍 gulp 的起源.发展:不会去一个个讲解 gulp API:也不想出现大段大段的 gulpfile.js 代码:更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用 ...

  5. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  6. 我爱工程化 之 gulp 使用(一)

    一.简介 gulp是前端自动化工具,压缩.合并.预编译检查等等,它与grunt频繁IO操作来消耗内存相比,它是使用的流的方式,我们可以简称为管道流(一端入,一端出,3通水,一个大桶,第一通在管道里面流 ...

  7. Gulp:基于流的自动化构建工具

    前言 先说说为什么会使用gulp. 当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如: 1.代码的压缩合并.图片压缩怎么搞: 2.代码校验,是否规范 ...

  8. [转发]Gulp开发教程(翻译)

    Building With Gulp =================== 转载出处 原文地址 翻译出处 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的 ...

  9. Gulp思维——Gulp高级技巧

    本文翻译自Getting gulpy -- Advanced tips for using gulp.js 感受过gulp.js带来的兴奋过后,你需要的不仅仅是它的光鲜,而是切切实实的实例.这篇文章讨 ...

随机推荐

  1. 64位主机64位oracle下装32位客户端ODAC(NFPACS版)

    64位主机64位oracle下装32位客户端ODAC(NFPACS版) by dd 1.下载Oracle Data Access Components(ODAC) Xcopy的两个版本: x86:(我 ...

  2. java.lang.IllegalStateException: Web app root system property already set to different value

    webAppRootKey是在java web项目的web.xml配置文件中表示项目的唯一标示,在Eclipse调试Web项目时,项目的路径是一个临时路径,不在真正的路径下,可以通过log4j日志的方 ...

  3. Spring MVC MultipartFile实现图片上传

    <!--Spring MVC xml 中配置 --><!-- defaultEncoding 默认编码;maxUploadSize 限制大小--><!-- 配置Multi ...

  4. su root认证失败的解决方法

    sudo passwd 输入安装密码. 输入新密码. 输入 su 即获得root权限.

  5. 一些关于HTML与CSS的总结与实际应用

    //学习前端也快一年了,觉得有必要好好总结一下这一年来学过的知识.一些是前辈们的精华,文章最后会讲地址一一放出,若原作者有任何介意,请及时联系我删除. 关于DOCTYPE 1.DOCTYPE的作用是什 ...

  6. 利用注解来保存uri

    一直对getRequestURI()与getRequestURL()理解不透彻,因此今天通过查找资料,现将些许收获分享一下: [非原创]代码搬运工..(*^__^*) 1.request.getSch ...

  7. 4.3 多线程进阶篇<中>(GCD)

    更正:队列名称的作用的图中,箭头标注的有些问题,已修正 本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” 本文源码 Demo 详见 Gith ...

  8. ASP.NET下回车键的触发效果

    在ASP.NET下,在客户端触发回车键,默认调用了页面中第一个button,这有时是非常头痛的,比如页面的第一个按键是注销键时,想想也够可怕了. .net提供设置默认回车键的属性,this.Form. ...

  9. select2插件不兼容ie7,ie7下样子显示错位问题

    1.源文件(未修改) select2.min.css.select2.min.js 2.ie7下显示样式: 3.ie8下显示样式: 4.经查看发现ie7下对一些属性的解析和ie8不同,需对ie7另作h ...

  10. js数组与对象性能比较

    js的数组可以看成特殊的对象,获取指定项的行为跟获取对象中指定key对应项的行为是一致的. 一般都是hash map实现的,因而复杂度是常数级的.