Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
1.基本使用
代码语言：javascript复制npm i gulp-cli -g
npm i gulp -D
cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下
代码语言：javascript复制const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
function build(done) {
gulp.src(['src/test/**/*.js'])
//src/js目录下所有js文件
.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
done();
}
function hello(done){
console.log('hello');
done();
}
exports.default = gulp.series(build,hello)上述代码会将src/test里面的所有js文件合并，压缩成一个文件并保存到./bunld/js/bundle.min.js 运行命令
gulp返回如下
代码语言：javascript复制$ gulp
[08:51:09] Using gulpfile ~Desktopnodejsgulpgulpfile.js
[08:51:09] Starting 'default'...
[08:51:09] Finished 'build' after 17 ms
[08:51:09] Starting 'hello'...
hello
[08:51:09] Finished 'hello' after 1.65 ms
[08:51:09] Finished 'default' after 21 ms编译es6
代码语言：javascript复制 cnpm i gulp-babel @babel/core @babel/preset-env -Dconst gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const babel = require('gulp-babel');//引入babel
function build(done) {
gulp.src(['src/test/**/*.js'])
//src/js目录下所有js文件
.pipe(babel({
presets:['@babel/env']
}))
.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
.pipe(uglify())
.pipe(gulp.dest('./build/1js'))
done();
}sourcemap
当我们执行编译时，如果代码有错会非常不利于调试，因为代码都变成一行了 解决办法是通过sourcemap。 sourcemap保留了之前编译的代码使代码容易调试，当出错时浏览器会通过sorcemap恢复源代码并定位错误
代码语言：javascript复制 cnpm i gulp-sourcemaps -Dconst gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
function build(done) {
gulp.src(['src/1.js'])
//src/js目录下所有js文件
.pipe(sourcemaps.init())//sorcemap初始化
.pipe(babel({
presets:['@babel/env']
}))
.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
.pipe(uglify())
.pipe(sourcemaps.write('../maps'))//sourcemap数据写入
.pipe(gulp.dest('./build/js'))
done();
}
function hello(done){
console.log('hello');
done();
}
exports.default = gulp.series(build,hello)某js文件
代码语言：javascript复制alert("0134256u6i")
Datw.style.backgroundColor='red'我们的代码并没有Text元素，但打包时不会报错
当html引入打包后的js文件时
直接定位了错误信息，方便调试 不过使用这个功能必须打开谷歌浏览器的Enable Javascript source maps
css
代码语言：javascript复制cnpm i gulp-cssmin -Dconst gulp = require('gulp');
const concat = require('gulp-concat');
const cssmin = require('gulp-cssmin');
const sourcemaps = require('gulp-sourcemaps');
function build(done) {
gulp.src(['src/*.css'])
//src/js目录下所有js文件
.pipe(sourcemaps.init())//sorcemap初始化
.pipe(concat('test.min.css'))//压缩成一个文件，不指定则分别压缩
.pipe(cssmin())
.pipe(sourcemaps.write('../maps'))//sourcemap数据写入
.pipe(gulp.dest('./build/css'))
done();
}
exports.default = build;自动监听
代码语言：javascript复制const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const watcher = gulp.watch(['./src/*.js']);
const livereload = require('gulp-livereload');
//打包函数
let js = function js(done){
gulp.src(['src/*.js'])
//src/js目录下所有js文件
.pipe(sourcemaps.init())//sorcemap初始化
.pipe(babel({
presets:['@babel/env']
}))
.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩
.pipe(uglify())
.pipe(sourcemaps.write('../maps'))//sourcemap数据写入
.pipe(gulp.dest('./build/js'))
.pipe(livereload());
console.log(`File was changed`);
done()
}
//监听文件
function watch(){
livereload.listen();
gulp.watch('./src/*.js', js)
//重新加载对应文件
gulp.watch(['./src/*.js','./index.html']).on('change',function(path){
livereload.changed(path)
})
}
exports.default = watch;
/**
* 1.指定路径
* 2.打包指定输出的文件
* 3.压缩
* 4.输出目录
* cnpm i gulp gulp-uglify gulp-concat gulp-rename
* sourcemap 保留了之前编译的代码使代码容易调试
* 出错，浏览器通过sorcemap恢复源代码
* cnpm i gulp-sourcemaps -D
* gulp-watch
* livereload
* cnpm i -g http-server
* cnpm i gulp-livereload -D
* 安装插件
*/
