文档章节

04_gulp介绍

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:18
字数 1974
阅读 1
收藏 0
点赞 0
评论 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
博文 2139
码字总数 82983
作品 0
程序员
使用gulp和browserSync实现页面自动刷新

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

阿振 ⋅ 2016/06/25 ⋅ 1

前端自动化构建工具gulp的使用介绍

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

jywud ⋅ 2016/05/14 ⋅ 0

Gulp、Webpack区别

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

追风_ ⋅ 01/02 ⋅ 0

前端构建工具Gulp.js

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

思诚之道 ⋅ 2017/12/23 ⋅ 0

【天赢金创】探究Gulp的Stream

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

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

gulp压缩图片进阶

之前文章已经提到,图片的压缩处理可以很大程度提高网页性能。在实际工程中,借助自动化工具可以很方便地实现图片的压缩,本文主要介绍gulp工作流下图片的压缩方法。 准备工作 使用gulp进行图...

bug_killer ⋅ 2017/12/23 ⋅ 0

使用Glup.JS优化JS、CSS、图片,压缩合并

下面进入正题,简单说一下如何安装,使用gulp 1. 安装Gulp gulp的任务处理机制是,将来源档案当作输入,通过Node.js的Stream操作流,并将流导向gulp的任务处理插件plugins,处理完成后将结果...

Billydotzhang ⋅ 2016/06/01 ⋅ 0

Nodejs 库路径

Gulp.js介绍 Gulp是一个构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript里。前端开...

雨中人X ⋅ 2015/12/08 ⋅ 0

一个后端的前端学习之旅——2.先搞定gulp

这是我的小本本的笔记,先列出了dev中用到的东西,blog可能写了就懒得懂了,但是小本本是随时更新的 小本本位置 一个gulp的脚手架 https://github.com/WINTR/gulp-frontend-scaffold npm淘宝...

D咄咄 ⋅ 2017/11/29 ⋅ 1

又一个选择 - Gulp.js

前言 还记得过年前的那篇介绍的文章,的强大,相信大家都见识了。年后打了两天的酱油,看了不少的插件和教程。发现了一个号称比要好的 - ,详细简介gulp.js。网上有很多比较和的文章。谈论到...

webchock ⋅ 2015/02/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Day 17 vim简介与一般模式介绍

vim简介 vi和Vim的最大区别就是编辑一个文件时vi不会显示颜色,而Vim会显示颜色。显示颜色更便于用户编辑,凄然功能没有太大的区别 使用 yum install -y vim-enhanced 安装 vim的三种常用模式...

杉下 ⋅ 54分钟前 ⋅ 0

【每天一个JQuery特效】根据可见状态确定是否显示或隐藏元素(3)

效果图示: 主要代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>根据可见状态确定 是否显示或隐藏元素</title><script src="js/jquery-3.3.1.min.js" ty......

Rhymo-Wu ⋅ 今天 ⋅ 0

OSChina 周四乱弹 —— 初中我身体就已经垮了,不知道为什么

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @加油东溪少年 :下完这场雨 后弦 《下完这场雨》- 后弦 手机党少年们想听歌,请使劲儿戳(这里) @马丁的代码 :买了日本 日本果然赢了 翻了...

小小编辑 ⋅ 今天 ⋅ 12

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部