通过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两个文件中代码了,如下图:
五、总结
通过以上流程,已经可以正常开发前端插件了,大家也可在此基础上,再进行优化。