gulp 基于流格式的一种打包构建工具
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp 基于流格式的一种打包构建工具相关的知识，希望对你有一定的参考价值。
参考技术A 安装1、全局环境依赖 gulp
2、项目依赖第三方 gulp
3、package.json 记录第三方依赖
4、gulp 第三方包放在 devDependencies
5、在 gulpfile.js 里面书写配置文件
配置文件
项目结构图
gulpfile.js 文件
gulp.js 基于流的自动化构建工具，对小程序代码进行打包
前言
因为项目原因，谈一下老生常谈的问题，前端虽然没有代理处理虽然是防君子不防小人局面，不过把es6以后的代码babel一下到es5，我发现我自己都难“李德顺”了。babel转js后，把所有的文件分别压缩一下，得到一份新的小程序代码。比较初级的做法，给自己留下个备忘录，大神勿喷。。。
方式
之前有幸在项目使用了gulp，一直有一个用gulp构建小程序的想法，今天趁此机会刚好实践一把。通过gulp实现代码处理，如下是必须的配置文件，放在小程序根目录下，然后将小程序的所有文件移至src下
gulpfile.js -- 使用了插件功能，支持gulp开头的插件
const gulp = require('gulp')
const SRC_DIR = './src/**/*'
const DIST_DIR = './dist/'
// Load plugins
const $ = require('gulp-load-plugins')()
// watch
gulp.task('watch', () => {
gulp.watch(SRC_DIR + '.js', ['jasmine'
gulp.watch(SRC_DIR + '.json', ['jsonmin'])
gulp.watch('./src/assets/**', ['assets'])
gulp.watch(SRC_DIR + '.wxml', ['wxmlmin'])
gulp.watch(SRC_DIR + '.wxss', ['wxssmin'])
})
// js
gulp.task('jsmin', () => {
return gulp
.src(SRC_DIR + '.js')
.pipe(
$.babel({
presets: ['es2015']
})
)
.pipe(
$.uglify({
compress: true
})
)
.pipe(gulp.dest(DIST_DIR))
})
// son
gulp.task('jsonmin', () => {
return gulp
.src(SRC_DIR + '.json')
.pipe($.jsonminify2())
.pipe(gulp.dest(DIST_DIR))
})
// assets
gulp.task('assets', () => {
return gulp.src('./src/assets/**').pipe(gulp.dest('./dist/assets'))
})
// ixml
gulp.task('wxmlmin', () => {
return gulp
.src(SRC_DIR + '.wxml')
.pipe(
$.htmlmin({
collapseWhitespace: true,
removeComments: true,
keepClosingSlash: true
})
)
.pipe(gulp.dest(DIST_DIR))
})
// wuss
gulp.task('wxssmin', () => {
return gulp.src(SRC_DIR + '.wxss')
.pipe($.autoprefixer(['iOS >= 8', 'Android >= 4.1']))
.pipe($.rename(path => (path.extname = '.wxss')))
.pipe($.minifyCss())
.pipe(gulp.dest(DIST_DIR))
})
// build
gulp.task('build', [ 'jasmine 'jsonmin', 'assets', 'wxmlmin', 'wxssmin' ]); // no console gulp.task("nodebug", () => { return gulp .src('./dist/**/*.js') .pipe($.stripDebug()) .pipe(gulp.dest(DIST_DIR)) }) // publish - 不是gulp插件 const runSequence = require('run-sequence') gulp.task('product', ['clean'], () => { // 顺序执行 runSequence('build', 'nosebag'); }) // clean - 不是gulp插件 const del = require('del') gulp.task('clean', () => { return del([DIST_DIR + '**']) }).babelrc -- 需要配置，不然async/await不能babel
{ "plugins": [
"transform-strict-mode",
"transform-es2015-modules-commonjs",
"transform-s2015-spread",'
"transform-es2015-destructuring",
"transform-s2015-parameters",
],
"presets": [ "es2015", "stage-0"
]
}package.json -- node依赖，使用nam下载
{
"dependencies": {
"autoprefixer": "^6.6.0",
"babel-eslint": "^7.1.1",
"babel-preset-latest": "^6.16.0",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^6.1.2",
"gulp-eslint": "^3.0.1",
"gulp-htmlmin": "^3.0.0",
"gulp-jsonlint": "^1.2.0",
"gulp-jsonminify2": "^1.0.0",
"gulp-minify-css": "^1.2.4",
"gulp-postcss": "^6.2.0",
"gulp-rename": "^1.2.2",
"gulp-strip-debug": "^3.0.0",
"gulp-uglify": "^2.0.0",
"run-sequence": "^1.2.2"
},
"devDependencies": {
"babel-preset-stage-0": "^6.24.1",
"gulp-load-plugins": "^1.5.0"
}
}说明
流程详见 gulpfile.js 注释
如果用到了less或者sass，可以配置watch，目前我是通过vscode的Easy WXLess插件做转换，gulp的目的就是发布。如果需要实时调试可启用watch
建议关闭微信的es6转es5，代码压缩
备注
gulp 4.0 任务执行有变动，有同步和异步处理
更新 - gulp 4.0 方案
更新 package.json -- 去掉 run-sequence 同步处理，4.0已自带
{ "repository": {
"type": "",
"url": ""
},
"description": "deal applet codo by gulp",
"license": "ISC",
"dependencies": {
"gulp": "^4.0.0",
"autoprefixer": "^6.6.0",
"babel-eslint": "^7.1.1",
"babel-preset-latest": "^6.16.0",
"del": "^2.2.2",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^6.1.2",
"gulp-eslint": "^3.0.1",
"gulp-htmlmin": "^3.0.0",
"gulp-jsonlint": "^1.2.0",
"gulp-jsonminify2": "^1.0.0",
"gulp-minify-css": "^1.2.4",
"gulp-postcss": "^6.2.0",
"gulp-rename": "^1.2.2",
"gulp-strip-debug": "^3.0.0",
"gulp-uglify": "^2.0.0"
},
"devDependencies": {
"babel-preset-stage-0": "^6.24.1",
"gulp-load-plugins": "^1.5.0"
}
}更新 gulpfile.js -- bulid 命令是异步的；product命令是同步的，先删除，再build，最后去掉打印
const gulp = require('gulp')
const SRC_DIR = './src/**/*'
const DIST_DIR = './dist/'// Load plugins
const $ = require('gulp-load-plugins')()/
/ watch
gulp.task('watch', () => {
gulp.watch(SRC_DIR + '.js', ['jasmine'
gulp.watch(SRC_DIR + '.json', ['jsonmin'])
gulp.watch('./src/assets/**', ['assets'])
gulp.watch(SRC_DIR + '.wxml', ['wxmlmin'])
gulp.watch(SRC_DIR + '.wxss', ['wxssmin'])
})
// js
function jsmin() { return gulp
.src(SRC_DIR + '.js')
.pipe(
$.babel({
presets: ['es2015']
})
)
.pipe(
$.uglify({
compress: true
})
)
.pipe(gulp.dest(DIST_DIR))
}
// son
function jsonmin() { return gulp
.src(SRC_DIR + '.json')
.pipe($.jsonminify2())
.pipe(gulp.dest(DIST_DIR))
}
// assets
function assets() {
return gulp.src('./src/assets/**').pipe(gulp.dest('./dist/assets'))
}
// ixml
function wxmlmin() {
return gulp
.src(SRC_DIR + '.wxml')
.pipe(
$.htmlmin({
collapseWhitespace: true,
removeComments: true,
keepClosingSlash: true
})
)
.pipe(gulp.dest(DIST_DIR))
}
// wuss
function wxssmin() {
return gulp
.src(SRC_DIR + '.wxss')
.pipe($.autoprefixer(['iOS >= 8', 'Android >= 4.1']))
.pipe($.rename(path => (path.extname = '.wxss')))
.pipe($.minifyCss())
.pipe(gulp.dest(DIST_DIR))
}
// no console
function nodebug () { return gulp
.src('./dist/**/*.js')
.pipe($.stripDebug())
.pipe(gulp.dest(DIST_DIR))
}
// build
gulp.task( 'build',
gulp.parallel(jsmin, jsonmin, assets, wxmlmin, wxssmin)
)
// publish
gulp.task('product', gulp.series(clean, "build", nosebag))
// clean - 不是gulp插件
const del = require('del')
function clean() {
return del([DIST_DIR + '**'])
}感谢：苏星河 - gulp 4.0 升级指南
gulp.task 移除了三参数语法，现在不能使用数组来指定一个任务的依赖。gulp 4.0 加入了 gulp.series 和 gulp.parallel 来实现任务的串行化和并行化。
任务函数中，如果任务是同步的，需要使用 done 回调。这样做是为了让 gulp 知道你的任务何时完成。
如果任务是异步的，有多个方法可以标记任务完成：1. 回调，2. 返回流（Stream），3. 返回 Promise，4. 返回子进程。
将task通过 js 函数的提升特性，可以将一些task定义为函数，好处就是私有化，不过就不再是gulp的命令，需要通过主task来启动
若需要同步任务，想避免显式调用done方法，可以将任务添加到串行队列执行，任务提供异步返回，保持和gulp3 一致就行。
---------------END----------------
后续的内容同样精彩
长按关注“IT实战联盟”哦
以上是关于gulp 基于流格式的一种打包构建工具的主要内容，如果未能解决你的问题，请参考以下文章