前端自动化构建-Gulp实现前端插件开发

通过Gulp可以开发些前端小插件，像大家常用到的jQuery，网上下载时，会有jquery.js和jquery.min.js两种文件，这些是如何实现的。里面有很多小模块，如何通过import和export来将这些模块合并到一个文件中，该篇会详细讲述下。

一、创建项目目录

1.1 创建目录test

在电脑上盘符中，创建目录test

1.2 初始化项目

进入test目录，执行cmd命令行，如下：

npm init

 执行后，依次填写相应内容即可，如下所示：

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\workspace\web\gulp\test\package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

回车后，test目录中会生成package.json文件。

二、gulp安装

全局安装，命令行：

npm install --global gulp@4

gulp本地依赖安装，命令行：

npm install --save-dev gulp@4

执行后，目录中会生成node_modules目录，如下图：

注意：这里使用的是gulp 4.0.2版本，不同版本对依赖包中组合插件版本要求不同，如果版本不同步，会报错，无法正常运行。

三、gulpfile.js文件创建

在test目录中创建gulpfile.js文件，代码如下：

var gulp = require('gulp');

gulp.task('uglify', function(){
	console.log('uglify');
});

这是cmd命令执行如下：

$ gulp uglify
[17:25:37] Using gulpfile D:\workspace\web\gulp\test\gulpfile.js
[17:25:37] Starting 'uglify'...
uglify

可以正常输出console内容了。

四、babel转译及文件合并

由于babel只是转译语法，所在转译为浏览器可用的代码，合并文件还需要browserify。使用browserify，注意版本号，如果出错可降低版本试试。

第一步：在test目录中， 创建src存放源码文件，并新建index.js，及以库包目录lib，如下图：

第二步：另外在test目录中，创建dist目录，用于存储生成文件。

现在test目录结构，如下图：

 4.1 index.js

在index.js文件中，先简单写个基础框架，代码如下：

(function($){
	
})(jQuery);

4.2 gulpfile.js

在gulpfile.js进程中，添加如下代码：

var gulp = require('gulp');

gulp.task('uglify', function(){
	return gulp.src("src/index.js")
		.pipe(gulp.dest("dist"))
});

cmd执行代码如下：

$ gulp uglify
[17:38:48] Using gulpfile D:\workspace\web\gulp\test\gulpfile.js
[17:38:48] Starting 'uglify'...
[17:38:48] Finished 'uglify' after 18 ms

执行完成后，dist目录中，则会生成对应文件了。

4.3 转义相关插件安装

代码如下：

//babel编译es6（默认安装为8.0，不太稳定）
npm install --save-dev gulp-babel@7 babel-core babel-preset-env babel-preset-es2015

//文件打包组件
npm install --save-dev browserify@14
 
//支持import from export解析
npm install --save-dev babelify@8
 
//stream流和buffer流处理
npm install --save-dev vinyl-source-stream vinyl-buffer

此时，gulpfile.js中的uglify进程，进行改造下，即可生成文件了，代码如下：

var gulp = require('gulp');
var babelify = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task('uglify', function(){
	return browserify({
            entries: 'src/index.js',
            debug: true
        })
        .transform(babelify, {presets: ["es2015"], extensions: [".js"]})
		.bundle()
		.pipe(
			source('app.js')
		)
		.pipe(
			buffer()
		)
		.pipe(gulp.dest("dist"))
});

执行代码如下：

$ gulp uglify
[18:21:17] Using gulpfile D:\workspace\web\gulp\test\gulpfile.js
[18:21:17] Starting 'uglify'...
[18:21:17] Finished 'uglify' after 126 ms

此时，dist目录中，则会生成app.js文件。

4.4 压缩代码

对生成的app.js进行压缩处理，生成app.min.js文件。

安装gulp-uglifyjs，代码如下：

npm install --save-dev gulp-uglifyjs

此时对gulpfile.js进行改造下即可，代码如下：

var gulp = require('gulp');
var babelify = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglifyjs');

gulp.task('uglify', function(){
	return browserify({
            entries: 'src/index.js',
            debug: true
        })
        .transform(babelify, {presets: ["es2015"], extensions: [".js"]})
		.bundle()
		.pipe(
			source('app.js')
		)
		.pipe(
			buffer()
		)
		.pipe(gulp.dest("dist"))
		.pipe(
			uglify('app.min.js', {})	
		)
		.pipe(gulp.dest("dist"))
});

执行代码如下：

$ gulp uglify
[18:30:18] Using gulpfile D:\workspace\web\gulp\test\gulpfile.js
[18:30:18] Starting 'uglify'...
[18:30:18] Finished 'uglify' after 148 ms

此时，dist目录中，则会生成app.js和app.min.js两个文件了。

4.5 import和export

我们在src/lib目录中，创建tabs.js和dialog.js两个文件，代码分别如下：

dialog.js

const Dialog = {
	name: "这是一个弹框组件"
}

export default Dialog

tabs.js

const Tabs = {
	name: "这是一个Tab组件"
	
}

export default Tabs

index.js

import Dialog from './lib/dialog.js'
import Tabs from './lib/tabs.js'

(function($){
	
})(jQuery);

执行代码如下：

$ gulp uglify
[18:36:17] Using gulpfile D:\workspace\web\gulp\test\gulpfile.js
[18:36:17] Starting 'uglify'...
[18:36:18] Finished 'uglify' after 190 ms

此时，生成文件中，则组合了dialog和tabs两个文件中代码了，如下图：

五、总结

通过以上流程，已经可以正常开发前端插件了，大家也可在此基础上，再进行优化。