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. [NHibernate]查看NHibernate生成的SQL语句

    最近接触到一个用Spring.Net结合NHIbernate的项目,第一次使用,有很多配置,数据操作一旦出问题,很难找到原因,那么如何查看NHibernate发送给数据库的SQL语句呢? 当然我们可以 ...

  2. 解决Xcode真机测试时ineligible devices的问题

    升级了Xcode到6.3,连接真机测试时,出现不能选择设备.如图: 设备系统版本是8.3的,Xcode连接其他低系统版本的设备做真机测试时就不会有这个问题. 有人说这是Xcode6.3的bug. 我的 ...

  3. Nodejs 创建web服务

    // 加载http服务包 var http = require("http"); // 创建服务 var server = http.createServer(requestLis ...

  4. 如何查看bash shell 帮助信息?

    man bash 查看bash的命令帮助 info bash 查看bash的文档 help 命令显示bash支持的命令: 如果想看某个命令的帮助可以 help 命令.如 help cd 对bash的命 ...

  5. 使用canal分析binlog(二) canal源码分析

    在能够跑通example后有几个疑问 1. canal的server端对于已经读取的binlog,client已经ack的position,是否持久化,保存在哪里 2. 即使不启动zookeeper, ...

  6. asp.net mvc引用控制台应用程序exe

    起因:有一个控制台应用程序和一个web程序,web程序想使用exe程序的方法,这个时候就需要引用exe程序. 报错:使用web程序,引用exe程序 ,vs调试没有问题,但是部署到iis就报错,如下: ...

  7. DES加密

    接口等加密字段 import java.security.SecureRandom; import javax.crypto.Cipher;import javax.crypto.SecretKey; ...

  8. *POJ 1222 高斯消元

    EXTENDED LIGHTS OUT Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9612   Accepted: 62 ...

  9. bootstarp3 支持ie8

    http://blog.csdn.net/hyb3280660/article/details/51850832 想要bootstarp3 支持ie8? 引入 <!-- 存放全局css/js - ...

  10. 实例讲解 SQL 注入攻击

    这是一篇讲解SQL注入的实例文章,一步一步跟着作者脚步探索如何注入成功,展现了一次完整的渗透流程,值得一读.翻译水平有限,见谅! 一位客户让我们针对只有他们企业员工和顾客能使用的企业内网进行渗透测试. ...