04_gulp介绍

作者: 极光火狐狸 | 来源:发表于2017-03-27 11:45 被阅读42次

04_gulp介绍
Runtime介绍---术语介绍
介绍
介绍😊
介绍
介绍
介绍
介绍
介绍
介绍

环境

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

04_gulp介绍
环境 Centos 7 X86_64(虚拟机) 初始化安装gulp package.json 创建package...
Runtime介绍---术语介绍
1. 什么是Runtime Runtime又叫运行时，是一套C语言的API。我们平时编写的OC代码，底层都是基于...
介绍
万物终有一天会消失殆尽，诸神出卖黎明，光明为黑暗所湮灭，日月皆痕，海潮鸣泣，幼雏嚎啕，生灵涂炭。托里奥世纪第20...
介绍😊
大家好，我是beth，初入简书，不邀自来，还请各位见谅！先说说我是怎么想着来的吧？这不是刚过了一个寒假嘛...
介绍
在这个世界上还有三个家族他们不受各个国家联合国管。但他们身上有着使命分别是帝国家族曲国家族圣国家族。他们隐藏在一个...
介绍
云轩：主角，星罗帝国的二皇子。从小就不能练气，被人们称为废物。直到12岁的时候，自己的武魂觉醒才能练气，双...
介绍
万花阁神秘至极的组织，亦正亦邪。万花阁的人行动隐秘，至今未被发现所在地。听说组成成员均以花来命名。所到之处，皆留...
介绍
此书命曰元.八洲传。属九洲四传第二部。第一部，上古往事。上古往事乃元八洲传外传。前两部为战胜心魔，而第三部，大梦...
介绍
千肆篇 7月的天气燥热，但在红杏阁里这份燥热就别有一番风味。漫天的胭脂水粉的香味变成了调味剂，女人们千姿百媚，在...
介绍
该文集属于收录文集，里面的内容不全是本人创作，有收录个人喜欢的内容。＊（偏个人向）

04_gulp介绍

环境

初始化

安装gulp

package.json

维护package.json

Gulp编程

Gulp.task

Gulp.pipe

Gulp.src

Gulp.dest

Gulp.watch

相关文章

04_gulp介绍

Runtime介绍---术语介绍

介绍

介绍😊

介绍

介绍

介绍

介绍

介绍

介绍

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读