文档章节

04_gulp介绍

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:18
字数 1974
阅读 1
收藏 0

环境

Centos 7 X86_64(虚拟机)

初始化

# yum install epel -y
# yum install vim nodejs npm -y

安装gulp

# npm install gulp --global

package.json

创建package.json配置文件(package.json是用来记录项目依赖组件的配置文件.)

# npm init      # 根据提示一步一步定义最基本的配置文件.

//下面配置完成之后的内容.
{
  "name": "normandy",
  "version": "1.0.0",
  "description": "bai yuan web projects",
  "main": "index.js",
  "scripts": {
    "test": "echo \\\"Error: no test specified\\\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

维护package.json

常规的维护可以通过vim或者直接用编辑器对package.json文件进行编辑,只有当需要为项目固化依赖组建时才会使用到下面这个命令来更新package.json.

# npm install npm install gulp gulp-buffer gulp-clean-css --save-dev

// 下面是配置更新后的内容.
{
  "name": "normandy",
  "version": "1.0.0",
  "description": "bai yuan web projects",
  "main": "index.js",
  "scripts": {
    "test": "echo \\\"Error: no test specified\\\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-preset-es2015": "^6.24.0",
    "gulp": "^3.9.1",
    "gulp-buffer": "0.0.2",
    "gulp-clean-css": "^3.0.3",
  }
}

Gulp编程

Gulp可以将指定目录下的文件或者正则匹配到的文件进行读取,然后以数据流形式通过管道可以与其他命令协作完成对项目文件的定制。官方明确表示它仅仅是一个基础的任务管理系统。这段话读起来有点绕口,gulp将它拆成了四个命令(gulp.task、gulp.src、gulp.dest、gulp.watch),下面单独对着四个命令进行简单描述(另外在延伸gulp的pipe属性方法和through插件库)。

Gulp.task

Gulp.task只负责执行命令, 其他的什么都不管, 运行Gulp.task不需要有任何准备, 不对任何文件和目录结构有要求。它仅仅是一个命令执行方法。

javascript的写法: gulpfile.js

var gulp = require('gulp');
gulp.task('hello_javascript', function() {
    console.log('hello JavaScript!')
})

ECMAScript的写法: gulpfile.babel.js

import gulp from 'gulp';
gulp.task('hello_ecmascript', () => {
    console.log('hello ECMAScript');
})

# 输出结果
[root@localhost ~]# gulp hello_ecmascript
[04:40:30] Requiring external module babel-register
[04:40:30] Using gulpfile ~/gulpfile.babel.js
[04:40:30] Starting 'hello_ecmascript'...
hello ECMAScript
[04:40:30] Finished 'hello_ecmascript' after 324 μs

语法: gulp.task(name [, deps] [, fn])
name和[, fn]着两个参数已经在上面两个例子中有使用过了,
[, deps]尚未使用,它主要的作用是控制执行顺序,
例如:gulp.task('hello_ecmascript', ['hello_javascript'], () => { ... })这个任务的意思是说, 在执行hello_ecmascript之前需要先执行hello_javascript

Gulp.pipe

管道(pipe)用于传输文件字节流(数据流),gulp默认采用了vinyl-fs来处理文件对象,而vinyl-fs采用through2来处理数据流;在处理多文件的数据流这件事情上gulp一般都脱离不了through2。参考网址
through2会将gulp.src指定的多个文件(例如: gulp.src('src/*.js')),通过回调的方式挨个挨个将文件对象传递给through2,下面举两个例子来介绍pipe属性方法和through2的工作原理。

文件合并(gulp-concat)

# 创建一个案例目录
[root@localhost ~]# mkdir -p simple_merge/src
[root@localhost ~]# cd simple_merge/

# 安装gulp和react
[root@localhost simple_merge]# cnpm install gulp gulp-concat vue react --save-dev

# 将react.js和vue复制到src目录
[root@localhost simple_merge]# cp node_modules/react/dist/react.js node_modules/vue/dist/vue.js src/

# 撰写gulpfile.js文件
[root@localhost simple_merge]# vim gulpfile.js
var gulp   = require('gulp'),
    concat = require('gulp-concat')

gulp.task('compress', function() {
    return gulp.src('src/*.js')
           .pipe(concat('bundle.js'))
           .pipe(gulp.dest('dist/'))
})

# 构建(文件合并)
[root@localhost simple_merge]# ./node_modules/gulp/bin/gulp.js compress
[20:13:51] Using gulpfile ~/fron_end/simple_merge/gulpfile.js
[20:13:51] Starting 'compress'...
[20:13:51] Finished 'compress' after 51 ms

# 查看当前目录结构
[root@localhost simple_merge]# ls
dist  gulpfile.js  node_modules  package.json  src

# 查看dist目录结构
[root@localhost simple_merge]# ls -lah dist/
total 364K
drwxr-xr-x 2 root root   23 Mar 26 20:13 .
drwxr-xr-x 5 root root   88 Mar 26 20:13 ..
-rw-r--r-- 1 root root 364K Mar 26 20:13 bundle.js

首先gulp.src框定了读取src目录下的所有文件名后缀为.js的文件,并通过.pipe属性方法将数据流传递给concat插件,而concat运行时根据制定的文件生成名称(bundle.js)将多个文件对象逐一进行读取以及写入到该制定的文件生成名称的对象中,并通过this关键字写入到当前实例,最终gulp.dest会根据标准接口去完成写入的行为(创建目录、写入文件)。

理解数据流转发过程(through2)
上面这个例子从代码层面来看,就一行有效代码,但是从文字描述来看可能过于复杂和带有不确定性,所以我这里将采用through2来打印一些日志来观察它的运行原理和过程(请注意:这个例子并没有做文件合并。);其实通过查看gulp-concat插件的源代码就可以发现它也是采用through2来完成文件对象的获取。

# 创建一个案例目录
[root@localhost ~]# mkdir -p simple_pipeline/src
[root@localhost ~]# cd simple_pipeline/

# 安装gulp和react
[root@localhost simple_pipeline]# cnpm install gulp vue react through2 --save-dev

# 将react.js和vue复制到src目录
[root@localhost simple_pipeline]# cp node_modules/react/dist/react.js node_modules/vue/dist/vue.js src/

# 撰写gulpfile.js文件
[root@localhost simple_merge]# vim gulpfile.js
var gulp = require('gulp'),
    through = require('through2')

gulp.task('displayDetails', function() {
    return gulp.src('src/*.js')
           .pipe(through.obj(function(file, encode, callback) {
               console.log(file);
               console.log(encode);
               console.log(callback);
               callback();
           }))
           .pipe(gulp.dest('dist/'))
})

# 观察运行过程
[root@localhost simple_gulppipe]# ./node_modules/gulp/bin/gulp.js displayDetails
[20:39:24] Using gulpfile ~/fron_end/simple_gulppipe/gulpfile.js
[20:39:24] Starting 'displayDetails'...


<File "react.js" <Buffer 20 2f 2a 2a 0a 20 20 2a 20 52 65 61 63 74 20 76 31 35 2e 34 2e 32 0a 20 20 2a 2f 0a 28 66 75 6e 63 74 69 6f 6e 28 66 29 7b 69 66 28 74 79 70 65 6f 66 ... >>
utf8
[Function]


<File "vue.js" <Buffer 2f 2a 21 0a 20 2a 20 56 75 65 2e 6a 73 20 76 32 2e 32 2e 35 0a 20 2a 20 28 63 29 20 32 30 31 34 2d 32 30 31 37 20 45 76 61 6e 20 59 6f 75 0a 20 2a 20 ... >>
utf8
[Function]


[20:39:24] Finished 'displayDetails' after 55 ms
Gulp.src

语法:
gulp.src(globs[, options])
根据提供的参数来读取文件源,并返回一个基于Vinyl风格的文件对象(流数据),这种文件对象可以通过pipe管道以一个文件对象传递给其他程序继续完成整合的行为。

globs
支持两种类型的数据,分别是字符串(glob)和列表(array of globs)。

glob支持字符串形式以通配符的方式来匹配文件集合。

// src/*.js标识匹配src目录下的所有后缀名为.js的文件,
// 并将它们逐一转换成Vinyl风格的文件对象。
gulp.src('src/*.js')

array of globs支持列表形式以通配符的方式来匹配文件集合。

gulp.src(['src/*.js', 'server/*.js', 'client/*.js'])

options
options选项是可选的,因为程序默认会给它赋值,除非有特定需求,否则一般不需要配置options;默认情况下程序会这样在程序内部帮你实现赋值。

gulp.src('src/*.js', { buffer: true, read: true, base: null })

还有另外一个options要单独进行处理(那就是base),默认情况下base是一个null的值(也可以在glob处通配符''或指定一个明确的指),意思是说,当所有程序处理完之后,最终交付给gulp.dest生成文件时,是否在指定的目录下生成有子目录结构的存放;例如: 样例1: 通配符**

# 查看目录结构
[root@localhost simple_gulpsrc]# ls 
node_modules    package.json    src
[root@localhost simple_gulpsrc]# tree src
src
└── client
    └── js
        ├── jianshu
        │   ├── react-with-addons.js
        │   ├── react-with-addons.min.js
        │   ├── react.js
        │   └── react.min.js
        └── youdao
            ├── vue.common.js
            ├── vue.common.min.js
            ├── vue.esm.js
            ├── vue.js
            ├── vue.min.js
            ├── vue.runtime.common.js
            ├── vue.runtime.esm.js
            ├── vue.runtime.js
            └── vue.runtime.min.js

# 创建通配符版本gulpfile_wildcard.js
[root@localhost simple_gulpsrc]# vim gulpfile_wildcard.js
var gulp = require('gulp')

gulp.task('build', functioin () {
    return gulp.src('src/client/js/**/*.js')
           .pipe(gulp.dest('dist'))
})

# 生成目标文件
[root@localhost simple_gulpsrc]# ./node_modules/gulp/bin/gulp.js --gulpfile gulpfile_wildcard.js build
[10:40:13] Using gulpfile ~/zhengtong/gulp_srcbase/gulpfile_wildcard.js
[10:40:13] Starting 'build'...
[10:40:13] Finished 'build' after 72 ms

# 查看目标目录
[root@localhost simple_gulpsrc]# tree dist
dist
├── jianshu
│   ├── react-with-addons.js
│   ├── react-with-addons.min.js
│   ├── react.js
│   └── react.min.js
└── youdao
    ├── vue.common.js
    ├── vue.common.min.js
    ├── vue.esm.js
    ├── vue.js
    ├── vue.min.js
    ├── vue.runtime.common.js
    ├── vue.runtime.esm.js
    ├── vue.runtime.js
    └── vue.runtime.min.js

样例2:通配符 + base

# 删除dist目录
[root@localhost simple_gulpsrc]# rm -rf dist/

# 创建通配符+base版本的gulpfile_wildcardBase.js
[root@localhost simple_gulpsrc]# vim gulpfile_wildcardBase.js
var gulp = require('gulp')

gulp.task('build', function () {
    return gulp.src('src/client/js/**/*.js', {base: 'src'})
           .pipe(gulp.dest('dist'))
})

# 生成目标文件
[root@localhost simple_gulpsrc]# ./node_modules/gulp/bin/gulp.js --gulpfile gulpfile_wildcardBase.js build
[10:45:18] Using gulpfile ~/zhengtong/gulp_srcbase/gulpfile_wildcardBase.js
[10:45:18] Starting 'build'...
[10:45:18] Finished 'build' after 65 ms

# 查看目标目录
[root@localhost simple_gulpsrc]# tree dist
dist
└── client
    └── js
        ├── jianshu
        │   ├── react-with-addons.js
        │   ├── react-with-addons.min.js
        │   ├── react.js
        │   └── react.min.js
        └── youdao
            ├── vue.common.js
            ├── vue.common.min.js
            ├── vue.esm.js
            ├── vue.js
            ├── vue.min.js
            ├── vue.runtime.common.js
            ├── vue.runtime.esm.js
            ├── vue.runtime.js
            └── vue.runtime.min.js
Gulp.dest
Gulp.watch

本文转载自:http://www.jianshu.com/p/4f99a623a8ee

AllenOR灵感
粉丝 11
博文 2635
码字总数 83001
作品 0
程序员
私信 提问
Gulp 更新日志

【2015-10-12】 新增对sass的支持 【2015-09-04】 针对view多目录进行优化,以适应后台项目 【2015-09-01】 优化文件监听,仅对当前修改的文件进行编译,提高编写代码时的编译效率 解决build...

Bossun
2015/09/01
3
0
grunt vs gulp

目前前端开发比较常见的构建工具有grunt和gulp,特点通过定义任务的方式,使用第三方插件进行js或css的文件编译,打包、压缩等工作 grunt 早期设计的前端构建框架,插件丰富 任务的定义使用配...

_huangbo
2016/06/08
5
0
使用gulp和browserSync实现页面自动刷新

在平时开发时,我用过很多gulp的自动刷新工具,昨天试了下browser-sync这款插件,感觉确实不错,分享给大家。 gulp和browser-sync的安装就不多介绍了,下面给出命令 将下面的文件写入文件...

阿振
2016/06/25
221
1
前端自动化构建工具gulp的使用介绍

gulp是基于流的自动化构建工具 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具...

jywud
2016/05/14
155
0
前端构建工具Gulp.js

摘要:最近一个网站项目,开发人员准备直接把前端的代码拷贝到生产环境来部署,而且使用Ant来执行拷贝,这样就可以前后端一起部署了。这是传统后端开发人员的思维。这样做固然可行,但是当前...

思诚之道
2017/12/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部