感觉 gulp 的入门操作 比webpack 要简单很多 而且个人感觉是 小松老师讲课最好的一次.
package.json ``` { “name”: “test”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo "Error: no test specified" && exit 1” }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: { “autoprefixer”: “^9.3.1”, “gulp”: “^3.9.1”, “gulp-clean-css”: “^4.0.0”, “gulp-connect”: “^5.6.1”, “gulp-connect-reproxy”: “0.0.98”, “gulp-htmlclean”: “^2.7.22”, “gulp-imagemin”: “^5.0.3”, “gulp-less”: “^4.0.1”, “gulp-postcss”: “^8.0.0”, “gulp-strip-debug”: “^3.0.0”, “gulp-uglify”: “^3.0.1” } }
1
> gulpfile.js
// 引入gulp const gulp = require(‘gulp’);
// 压缩 hmtl文件 const htmlclean = require(‘gulp-htmlclean’);
// 压缩 图片 const imgmin = require(‘gulp-imagemin’);
// 压缩js const uglify = require(‘gulp-uglify’);
// 去除 dubugger console.log alert const stripdebug = require(‘gulp-strip-debug’);
// 转译 less const less = require(‘gulp-less’);
// 压缩 css const cleancss = require(‘gulp-clean-css’);
// 转译 postcss const postcss = require(‘gulp-postcss’);
// 加css前缀 const autoprefixer = require(‘autoprefixer’);
// 开启服务器 const connect = require(‘gulp-connect’);
// 判断环境变量 是否为 开发环境 let devmode = process.env.NODE_ENV == ‘development’; // 设置环境变量 在命令行 $ export NODE_ENV=development
// 基本路径 const folder = { src : ‘src/’, dist : ‘dist/’ }
// gulp.tast 定义任务 // gulp.src 指定源文件 // gulp.pipe 添加中间处理,添加插件 // gulp.dest 指定输出文件 // gulp.watch 监听指定文件.
gulp.task(‘html’,function () {
1
2
3
4
5
6
let page = gulp.src(folder.src + 'html/*')
.pipe(connect.reload())
if (!devmode) {
page.pipe(htmlclean())
}
page.pipe(gulp.dest(folder.dist + 'html/')); });
gulp.task(‘connect’,function () {
1
2
3
4
5
connect.server({
port : 8888,
// 是否实时更新
livereload : true
});
});
gulp.task(‘watch’,function () {
1
2
3
gulp.watch(folder.src + 'html/*',['html']);
gulp.watch(folder.src + 'css/*',['css']);
gulp.watch(folder.src + 'js/*',['js']);
});
gulp.task(‘img’,function () {
1
2
3
gulp.src(folder.src + 'img/*')
.pipe(imgmin())
.pipe(gulp.dest(folder.dist + 'img/'));
}); gulp.task(‘css’,function () {
1
2
3
4
5
6
7
8
9
let page = gulp.src(folder.src + 'css/*')
.pipe(connect.reload())
.pipe(less())
.pipe(postcss([autoprefixer()]))
if (!devmode) {
page.pipe(cleancss())
}
page.pipe(gulp.dest(folder.dist + 'css/'));
}); gulp.task(‘js’,function () {
1
2
3
4
5
6
7
let page = gulp.src(folder.src + 'js/*')
.pipe(connect.reload())
.pipe(stripdebug())
if (!devmode) {
page.pipe(uglify())
}
page.pipe(gulp.dest(folder.dist + 'js/'));
});
gulp.task(‘default’,[‘html’,’css’,’js’,’img’,’connect’,’watch’]);
1
> 目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/src
/html
index.html
/css
index.less
/js
index.js
/img
2test.jpg
package.json
package-lock.json
gulpfile.js ``` 有一个报错, 开启服务器失败  ``` $ gulp [11:49:05] Using gulpfile ~\Desktop\qqMusic\gulpfile.js [11:49:05] Starting 'html'... [11:49:05] Finished 'html' after 8.69 ms [11:49:05] Starting 'css'... [11:49:05] Finished 'css' after 3.84 ms [11:49:05] Starting 'js'... [11:49:05] Finished 'js' after 902 μs [11:49:05] Starting 'img'... [11:49:05] Finished 'img' after 976 μs [11:49:05] Starting 'connect'... [11:49:05] 'connect' errored after 77 μs [11:49:05] TypeError: connect.server is not a function
at Gulp.<anonymous> (C:\Users\user\Desktop\qqMusic\gulpfile.js:38:10)
at module.exports (C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\index.js:214:10)
at C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\index.js:279:18
at finish (C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\lib\runTask.js:21:8)
at module.exports (C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\lib\runTask.js:60:3)
at Gulp.Orchestrator._runTask (C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\index.js:214:10)
at C:\Users\user\Desktop\qqMusic\node_modules\orchestrator\index.js:279:18 [11:49:06] gulp-imagemin: Minified 1 image (saved 828 B - 3%)
1
原因:
不是 const connect = require(‘gulp-connect-reproxy’); 而是 const connect = require(‘gulp-connect’); 弄错了插件. ```
老师说 gulp 是流的形式处理文件 而webpack 是把所有文件当成模块进行打包.
单从今天所学而言, 我感觉, gulp对依赖关系什么的似乎没有处理? 而且,似乎没有什么所谓的合并和分包?
