文档章节

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灵感
粉丝 10
博文 2634
码字总数 82983
作品 0
程序员
前端自动化构建工具gulp的使用介绍

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

jywud
2016/05/14
120
0
使用gulp和browserSync实现页面自动刷新

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

阿振
2016/06/25
116
1
前端构建工具Gulp.js

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

思诚之道
2017/12/23
0
0
Gulp、Webpack区别

在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐,当今越来越多的网站已...

追风_
01/02
0
0
【天赢金创】探究Gulp的Stream

来自Gulp的难题 描述Gulp的项目构建过程的代码,并不总是简单易懂的。 比如Gulp的这份recipe: var browserify = require('browserify'); var gulp = require('gulp'); var source = require...

第三方支付接口
2015/09/21
27
0

没有更多内容

加载失败,请刷新页面

加载更多

window.parent,top,window.self,parent,opener

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。 wind...

inidcard
刚刚
0
0
Linux下Redis的安装和部署

一、Redis介绍 Redis是当前比较热门的NOSQL系统之一 它是一个key-value存储系统。和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多,包括string、list、set...

曾大大胖
3分钟前
0
0
开源堡垒机jumpserver搭建

概述 之前说了国产良心kodexplorer,今天再说一个国内比较好的开源项目jumpserver,除此之外还可以的国内开源项目我觉得就是宝塔面板了。废话不多说上教程搭建。 虽然说你可以看下面的教程不...

bboysoulcn
9分钟前
0
0
iPhoneX 底部距离

iPhoneX 底部距离 CGFloat adjust = 0; if (@available(iOS 11.0, *)) { //Account for possible notch UIEdgeInsets safeArea = [[UIApplication sharedApplication] keyWindow].safeAreaIn......

壹峰
13分钟前
1
0
养生篇01 (饭水分离法)

作者简介❤李祥文,1939年出生于韩国庆尚北道尚州市成昌邑。 24岁时,偶遇奇人习得这种分别喝水吃饭的养生方法,从而治好了自己的胃病和哮喘。从此,李祥文对饮食之于人体的影响产生了极大的...

十九亿少女的梦
29分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部