前端自动化构建工具vGulp

作者: Alvin_Liu | 来源:发表于2017-02-22 21:50 被阅读0次

开始之前

关于Gulp的介绍网上有许多，完整的Gulp自动化工作流配置也不少，但或多或少有不让人满意的地方，加上项目的需要，于是自己便开始尝试写一个自己的前端自动化工作流。项目需求不同，配置肯定有些许区别，所以不能保证vGulp能用于你的项目中。本文只做参考，希望能为你提供一些帮助，具体的配置请根据实际情况调整。vGulp需要打磨之处还有许多，欢迎各路大神指正。

关于vGulp

Github地址：https://github.com/Alvin-Liu/vGulp （跪求Star，欢迎Fork！）

vGulp基于Gulp 3.9.1开发而成，用于处理前端项目文件的编译、压缩、合并、打包工作。HTML使用ejs模板编译而成，可根据自定义的语言包和命令编译成不同语言的HTML文件；css使用sass预处理编译而成，自动添加-webkit-、-moz-、-ms-等前缀；JS没有做过多处理，可以根据个人需要在gulpfile.js文件中添加JSLint或ESLint等。

什么情况下可以使用vGulp:

F5键坏了，手指不够长，懒...
Apache等环境下修改文件，找不到合适的自动刷新工具
开发多语言版本的网站页面等

vGulp使用方法

1.安装Node.js,安装Gulp（Node.js安装方法请自行搜索，Gulp入门）：

$ npm install --global gulp     // 全局安装
$ npm install --save-dev gulp   // 作为项目的开发依赖

2.克隆或者下载本项目，github地址：https://github.com/Alvin-Liu/vGulp：

$ git clone https://github.com/Alvin-Liu/vGulp.git

3.安装模块依赖：

npm install

4.根据需要简单配置自己的config.json，示例代码：

{
    "project" : "vGulp",    // 项目名   
    "src": {    // 源文件目录
        "ejs": "src/ejs", 
        "sass": "src/sass",
        "images": "src/images",
        "js": "src/js",
        "css": "src/css", 
        "source": "src/source",     //  其他文件，如视频，音乐，字体等
        "data": "language/data.json"    // 语言包路径
    },
    "dist": {   // 打包后文件目录
        "html": "html",
        "js": "static/js",
        "css": "static/css",
        "images": "static/images",
        "source": "static/source"
    },
    "localserver" : {   // 本地服务器
        "baseDir" : "src",  //  网站根目录
        "port" : "8081",    //  端口
        "proxy": false,     //  时候启用代理
        "target": "127.0.0.1"   // 代理地址
    },
    "lang":["zh","en"],     // 语言种类，HTML代码将编译到对应的文件夹中
    "data_use": 1,          // 指定data.json文件用那一种方式,目前可选0或者1,请看注意事项
    "displayInfo": false,   // 是否启用文件头部追加内容
    "pkg": {    // 追加内容模板请在gulpfile.js中修改
        "author":"",        
        "description":"",
        "version":"1.0.0",
        "homepage":"#",
        "license":""
    },
    "replaceWord": {    // 全局关键字替换
        "html": {
            "origin": "../",
            "dist": "../../static/"
        },
        "js": {
            "origin": "",
            "dist": ""
        },
        "css": {
            "origin": "",
            "dist": ""
        }
    },
    "concatCssFiles": { // css合并，暂时只支持一个
        "filename": "init.min.css",     // 合并后的文件名
        "folder": "common",     // 合并该文件夹中的内容
        "files": ["init.css","header.css"]  //  指定合并后的文件的先后顺序
    },
    "concatJsFiles": {  // js合并
        "filename": "global.min.js",
        "folder": "common",
        "files": ["b.js","a.js"]
    }      
}

5.根据需要修改gulpfile.js(请尽量熟悉vGulp之后再尝试);

6.执行gulp任务：

gulp help   // gulp参数说明
gulp        // 开发，添加命令 --lang= 可以指定语言，例：gulp --lang=en
gulp build  // 打包
gulp ejs    // ejs模板编译
gulp sass   // sass编译
gulp js     // js合并
gulp clean  // 清理无用文件
gulp watch  // 监听文件改变

特别说明

1.在命令后添加 --lang=en 或者 --lang= 指定语言版本，可以执行该语言对应的命令操作，如：

gulp build --lang=en  // 只会打包en语言下的HTML文件

2.多语言时,有两种方法应用页面数据,根据个人喜欢在config.json中配置data_use为0或者1;

data_use为0时，一个语言对应一个文件夹，且一个页面对应一个文件夹中的一个文件，如：index.ejs的数据对应index.json。使用该方式时，请先修改data文件的引用路径为 'language' ,不要指定具体的文件名;
data_use为1时(默认),所有文件对应同一个json文件，config中data.json文件的引用指定到具体的文件名。

3.多语言时,同一个页面由于字体长度等原因显示会有所差别，此时可以另外引入单独的针对该文件的css代码，所有ejs页面中都可以引用_lang这一全局变量，进行指定语言引入指定内容，如参考代码中的内容：

<%# 只有当语言为'zh'时,引入文件zh.css %>
<% if(_lang='zh'){ %>   
    <%- include('extra/zh.css') %>
<% } %>

如果了解Gulp或者只是需要一款刷新工具，下面内容可以忽略

vGulp 插件介绍

主要插件

以下插件由于使用频率较高且文档较多，使用简单，固仅做列表介绍(毕竟这篇文档主要目的不是用于介绍插件的，是吧):

gulp-ejs: 编译ejs文件（项目使用的是ejs，使用其他请自行更换）;
gulp-data: 配合gulp-ejs等使用，用于引入文件数据，如json文件等;
gulp-sass: 编译sass;
gulp-clean-css: 压缩css文件;
gulp-concat: 合并文件;
gulp-autoprefixer: 自动处理浏览器前缀, 如添加 -webkit- ;
gulp-uglify: 压缩js文件;
gulp-clean: 进行多余文件的清理;
gulp-imagemin: 压缩图片;
gulp-css-spriter: 用于合成css雪碧图;
gulp-htmlmin: 压缩html;

辅助插件

browser-sync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

gulp-load-plugins

顾名思义，本插件的功能就是帮你自动require你在package.json中声明的依赖。只要一句var $ = require('gulp-load-plugins')()，则package.json中声明的gulp-或gulp.开头的插件就会自动被放在变量$下面。如$.util就等于require('gulp-util')。

gulp-if

这个插件的功能也很简单，可以条件性的添加stream，如.pipe($.if(flag, action1()))，则只会在flag变量为true时才会将action1()添加到stream中去。

gulp-filter

gulp-filter可以把stream里的文件根据一定的规则进行筛选过滤。比如gulp.src中传入匹配符匹配了很多文件，可以把这些文件pipe给gulp-filter作二次筛选，如gulp.src('/.js').pipe($.filter(/a/.js))，本来选中了所有子文件下的js文件，经过筛选后变成名为a的子文件夹下的js文件。

gulp-plumber

这个插件的作用简单来说就是一旦pipe中的某一steam报错了，保证下面的steam还继续执行。因为pipe默认的onerror函数会把剩下的stream给unpipe掉，这个插件阻止了这种行为。

gulp-header

这个工具用来在压缩后的JS、CSS文件中添加头部注释，你可以包含任意想要的信息，通常就是作者、描述、版本号、license等。

gulp-order

gulp-order可以指定文件在stream中的执行顺序，例如本例中css合并时，可以指定合并后css文件的前后顺序，防止前面的样式被后面的覆盖。

gulp-replace

在项目中这个插件还是挺有用的，可以批量替换字符串，并且支持使用正则替换。

gulp-print

这个插件的作用很简单，打印出stream里面的所有文件名，通常调试的时候比较需要。

gulp-rename

该插件可以对文件进行重新命名。

其他Node.js模块简介

yargs

yargs是Node中处理命令行参数的通用解决方案。只要一句代码var args = require('yargs').argv;就可以让命令行的参数都放在变量args上，非常方便。它可以处理的参数类型也是多种多样的：

单字符的简单参数，如传入-m=5或-m 5，则可得到args.m = 5。
多字符参数（必须使用双连字符），如传入--lang=en或--lang en，则可得到args.lang = en。
不带值的参数，如传入--mock，则会被认为是布尔类型的参数，可得到args.mock = true。
除此之外，还支持很多其他类型的传参方式，具体可参考它的文档。

fs

fs是Node的文件系统模块，所有的方法都有异步和同步的形式。vGulp主要使用fs模块对文件进行判断存在和读取操作。

path

path模块用于对路径进行操作，如：

path.join([path1][, path2][, ...])

用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是""。

path.dirname(p)

返回路径中代表文件夹的部分。

path.basename(p[, ext])

返回路径中的最后一部分。

path.extname(p)

返回路径中文件的后缀名，即路径中最后一个'.'之后的部分。如果一个路径中并不包含'.'或该路径只包含一个'.' 且这个'.'为路径的第一个字符，则此命令返回空字符串。

var path = require('path'),
    file = 'D:/git/vGulp/test.js';

console.log(path.join('/hi', 'test', '2s/1s', 'tab', '..'));    // \hi\test\2s\1s
console.log(__dirname);             // D:\git\vGulp
console.log(path.dirname(file));    // D:/git/vGulp
console.log(path.basename(file));   // test.js
console.log(path.extname(file));    // .js

补充

待改进

配置好像有点繁琐(自我感觉)
没有进行md5命名和寻找更好的路径替换方式等
Gulp 4.0好像快来了

网友评论

前端开发那些事

本文标题：前端自动化构建工具vGulp

本文链接：https://www.haomeiwen.com/subject/ooxvwttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！