装好了gulp,接下来就是大战身手的时候了?
首先,当然是先装几个必须用到且简单的插件,其他以后在探索~
一、常用插件:
-
文档操作
- gulp-concat:合并文档
- gulp-rename:重命名文档 压缩
- gulp-uglify:压缩js文件
- gulp-clean-css:压缩css文件
- gulp-htmlmin:压缩html文件
- gulp-imagemin:压缩图片 其他
- gulp-jshint:检测js代码 坑1
- gulp-sass:编译sass
二、安装插件:
项目文件目录下执行:
cnpm install --save-dev gulp-uglify
或 npm install --save-dev gulp-uglify
即可完成 gulp-uglify 的安装,其他插件的安装只需要替换以上插件名即可。
//使用cnpm原因及方法详见
关于前端自动化工具Gulp的使用(一)——初次接触与安装.
坑1:gulp-jshint:检测js代码的安装必须同步安装 jshint,单装 gulp-jshint 会出现以下错误
Error: Cannot find module 'jshint/src/cli'
为什么呢,简单来说就是 gulp-jshint 依赖于 jshint ?
以上插件都装好后,package.json文件就会是一下这个样子:
安装完后还需将插件导入 gulpfile.js 才能使用
三、(可略过)检测插件
打开 gulpfile.js 文件,将已装好的插件导入,为防止一些莫名其妙的bug,采用一个个的导入来测试插件是否正确安装的方法,不然出现问题会很头大?
方法如下,还是拿 gulp-jshint 举例,测试代码如下:
关于 gulp.src 的文件匹配问题,可以自行谷歌
在命令行里运行 gulp jshint 测试:
js会产生一些报错,不过只要通过检测,基本是没问题的。
其他的插件检测与方法可以参考: https://gulpjs.com/plugins/.
四、好了,接下来就是见证奇迹的时候了?(看到这个表情相信你也懂了)
全部测试完成后,说明这些插件都装好了,这时 gulpfile.js 文件开头就是这样滴:
注:还是 gulp-jshint 的问题,只需要导入 gulp-jshint ,无需额外导入 jshint ,原因前文已说明?
编写好各方法,此时 gulpfile.js 应是如下样式,具体看使用哪些插件:
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
uglify = require("gulp-uglify"),
rename = require("gulp-rename"),
imagemin = require('gulp-imagemin'),
minifyHtml = require('gulp-htmlmin'),
minifyCss = require("gulp-clean-css");
//js代码检查
gulp.task('jshint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter()); //输出检查结果
});
//压缩js
gulp.task('minify-js', function () {
return gulp.src('js/*.js') // 要压缩的js文件
.pipe(uglify())
.pipe(gulp.dest('dist/js')); //压缩后的路径
});
//合并压缩全部的js,并重命名
gulp.task('concat-js', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
//压缩css
gulp.task('minify-css', function () {
return gulp.src('css/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
});
//合并压缩的css,并重命名
gulp.task('concat-css', function() {
return gulp.src('css/*.css')
.pipe(concat('all.css'))
.pipe(rename('all.min.css'))
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
})
//压缩html
gulp.task('minify-html', function() {
return gulp.src('html/*.html')
.pipe(minifyHtml())
.pipe(gulp.dest('dist/html'))
});
//压缩图片,压缩后的文件放入dest/images
gulp.task('image',function(){
return gulp.src('images/*.+(jpg|png|gif|svg)')
.pipe(imagemin())//压缩
.pipe(gulp.dest('dist/images'));//输出
});
//编译sass
gulp.task('sass', function() {
return gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
//默认命令,在cmd中输入gulp后,执行的就是这个命令
gulp.task('default', function() {
gulp.run('jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass')
});
命令行输入gulp,执行
???喵喵喵
好吧,修改默认任务:
//默认命令,在cmd中输入gulp后,执行的就是这个命令
gulp.task('default', ['jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass']);
命令行输入gulp,执行
喵喵喵???
好吧,再来
//默认命令,在cmd中输入gulp后,执行的就是这个命令
gulp.task('default', function() {
gulpstart('jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass')
});
什么鬼哦?
看说明,是默认任务出了问题,首先 function 必须说明,添加了说明 然而 run 、start 竟然不是 function ??喵喵,那网上的大神们的文件是怎么编译通过的哦,用查克拉么?
好吧,继续Gogol
好吧,连中文网都是这样
大坑f**k
继续狗狗狗
。。。
。。。
。。。
都9102年了,gulp都4.0了,所以
这么说 gulp.task(‘default’, [‘jshint’…]); 是妥妥的GG了,看来找资料也要找近一点的才行,不然掉坑了还沾沾自喜?
根据以下资料
Gulp 官网
Gulp 4.0 前瞻
完整的Ish指南升级到Gulp 4
Gulp 4
使用新添加的 gulp.series() 和 gulp.parallel() 方法
具体在 gulpfile.js 文件开头导入
const { series } = require('gulp');
接着就可以使用series方法了,parallel方法同理
然后修改默认任务
//默认命令,在cmd中输入gulp后,执行的就是这个命令
exports.default = series('jshint','minify-js','concat-js','minify-css','concat-css','minify-html','image','sass');
结果
成功,我的妈啊,全是坑?,以上文档15、16年的啊,现在都9102年了,gulp都4.0了,好像 gulp.watch 都不再使用了(⊙o⊙)?结果 gulp.js - 基于流的自动化构建工具 竟然还没更新?不过还是要感谢那些为汉化做出贡献的榜样们?
最后,果然学习新知识最好还是看官网 虽然全是英文,虽然一点都不人性化,但却是能避免很多坑啊?(小声:幸亏我有翻译君?)
参考链接:
https://www.cnblogs.com/Tom-yi/p/8036730.html
https://gulpjs.com/