说明

一套自己常用的gulp配置,之后按照gulp4的规范修改了一套,主要是stylus、scss、es 2015的支持。
针对常见的开发习惯进行了配置调整
autoprefixer: 针对常见浏览器的最新两个版本,自动添加前缀
concat: 大多数地方都没有使用,只针对于一个叫ellaH5的工具库进行代码合并,业务需要
rename: 压缩后的文件,都会在最后添加min后缀,例如style.scss => style.min.css
obfuscator: 混合加密js文件
jsdoc3: 根据代码中的注释,生成项目的说明文档,具体可以参考jsdoc的官网标准

命令

1
2
3
4
5
6
7
8
# 需要说明的是,以下命令都可以添加 --dev参数
# --dev 开发模式,生成map、js不做混淆加密
gulp
gulp default
gulp compile
gulp build
gulp clean
gulp doc

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
let gulp = require('gulp'),
sass = require('gulp-sass'),
stylus = require('gulp-stylus'),
cached = require('gulp-cached'),
sm = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
del = require('del'),
connect = require('gulp-connect'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
apf = require('gulp-autoprefixer'),
babel = require('gulp-babel'),
uglify = require('gulp-uglify'),
obfuscator = require('gulp-javascript-obfuscator'),
zip = require('gulp-zip'),
gulpif = require('gulp-if'),
jsdoc = require('gulp-jsdoc3');

// sass.compiler = require('node-sass');

// let dirname = "./public/h5/regist/";
const { series, parallel } = require('gulp');
let dirname = "./src";
// let output = "./dist";
let args = process.argv.slice(2);
let isDev = args.indexOf('--dev') !== -1

/**
* @description for scss and styl
*/
function scss() {
let steam = gulp.src(dirname + '/scss/**/*.scss')
.pipe(cached('scssCachedFile'))
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(gulpif(isDev, sm.init())) // 开发模式,生成代码sourcemaps
.pipe(apf({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认:true
remove: true //是否去掉不必要的前缀 默认:true
}))
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(rename(function (path) {
path.basename += '.min'
}))
.pipe(gulpif(isDev, sm.write('./maps'))) // 开发模式,生成代码sourcemaps
.pipe(gulp.dest(dirname + '/css'))
.pipe(connect.reload());
return steam;
}

function styl() {

let steam = gulp.src(dirname + '/styl/**/*.styl')
.pipe(cached('stylCachedFile'))
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(gulpif(isDev, sm.init())) // 开发模式,生成代码sourcemaps
// .pipe(apf({
// browsers: ['last 2 versions', 'Android >= 4.0'],
// // cascade: true, //是否美化属性值 默认:true
// remove: true //是否去掉不必要的前缀 默认:true
// }))
.pipe(stylus({
compress: true,
linenos: true
}))
.pipe(rename(function (path) {
path.basename += '.min'
}))
.pipe(gulpif(isDev, sm.write('./maps'))) // 开发模式,生成代码sourcemaps
.pipe(gulp.dest(dirname + '/css'))
.pipe(connect.reload());
return steam;
}

function styleWatch(cb) {
gulp.watch([dirname + '/scss/**/*.scss'], { events: 'all' }, scss);
gulp.watch([dirname + '/styl/**/*.styl'], { events: 'all' }, styl);
cb();
}

function cssClean(cb) {
return del([dirname + '/css/**'], cb);
}

/**
* @description for js
*/
function es() {
let steam = gulp.src([dirname + '/es/**/*.js'])
.pipe(cached('esCachedFile'))
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(gulpif(isDev, sm.init())) // 开发模式,生成代码sourcemaps
.pipe(babel())
.pipe(uglify())
.pipe(gulpif(!isDev, obfuscator())) // 非开发模式,则混淆加密js代码
.pipe(rename(function (path) {
path.basename += '.min'
}))
.pipe(gulpif(isDev, sm.write('./maps'))) // 开发模式,生成代码sourcemaps
.pipe(gulp.dest(dirname + '/js'))
.pipe(connect.reload());
return steam;
}

function ellaH5() {
let steam = gulp.src([dirname + '/lib/ellaH5/*.js'])
.pipe(cached('esH5CachedFile'))
.pipe(gulpif(isDev, sm.init())) // 开发模式,生成代码sourcemaps
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(babel())
.pipe(uglify())
// .pipe(gulpif(!isDev, obfuscator())) // 非开发模式,则混淆加密js代码
.pipe(concat('ellaH5.min.js'))//合并后的文件名
.pipe(gulpif(isDev, sm.write('./maps'))) // 开发模式,生成代码sourcemaps
.pipe(gulp.dest(dirname + '/lib'))
.pipe(connect.reload());

return steam;
}

function esWatch(cb) {
// es发生变化,编译es,同时更新文档
gulp.watch([dirname + '/es/**/*.js'], { events: 'all' }, parallel(es, compileDoc));
gulp.watch([dirname + '/lib/ellaH5/*.js'], { events: 'all' }, ellaH5);
cb();
}

function jsClean(cb) {
return del([dirname + '/js/**', dirname + '/lib/ellaH5.min.js'], cb);
}
/**
*
* html 监听
*/
function reloadHTML() {
return gulp.src(dirname + '/index.html')
.pipe(connect.reload())
}
function htmlWatch(cb) {
gulp.watch([dirname + '/index.html'], { events: 'all' }, reloadHTML);
cb();
}

/**
* @description connect
* @param {function} cb 成功回调
*/
function connectWatch(cb) {
connect.server({
root: '.',
livereload: true
});
cb();
}

/**
* @description zip code
*/
function distCode() {
return gulp.src([`${dirname}/**/*`], {
nodir: true
})
.pipe(gulp.dest('./dist'))
}

function distClean(cb) {
return del('./dist/**', cb);
}

function compileDoc(cb) {
let config = require('./.jsdoc.json')
return gulp.src(['README.MD', `${dirname}/es/**/*.js`], { read: false })
.pipe(jsdoc(config, cb));
}

exports.default = series(cssClean, jsClean, scss, es, compileDoc, htmlWatch, styleWatch, esWatch, connectWatch);
// exports.default = series(cssClean, jsClean, scss, es, compileDoc, ellaH5, styleWatch, esWatch, htmlWatch, connectWatch);

exports.compile = series(cssClean, jsClean, scss, es);
// exports.compile = series(cssClean, jsClean, scss, styl, es, ellaH5);

exports.build = series(cssClean, jsClean, scss, es);
// exports.build = series(cssClean, jsClean, scss, styl, es, ellaH5, distCode);

exports.clean = parallel(cssClean, jsClean);
// exports.clean = parallel(cssClean, jsClean, distClean);

exports.doc = compileDoc;