使用
browser-sync
进行本地开发自动刷新,配合
gulp-uglify
、
gulp-minify-css
对js和css进行压缩处理,最终打包到
dist
目录
安装gulp 以及其他插件
npm install gulp
npm install --save-dev ...
代码示例
- 安装依赖
npm install --save-dev gulp gulp-clean run-sequence browser-sync gulp-uglify gulp-minify-css
- gulpfile.js
var gulp = require('gulp'), //本地安装gulp所用到的地方
clean = require('gulp-clean'),
runSequence = require('run-sequence'); // 同步执行任务
var browserSync = require('browser-sync');
var uglify = require("gulp-uglify"); //获取gulp-ublify组件
var minifyCSS = require('gulp-minify-css');
var reload = browserSync.reload;
gulp.task('devServer', function () {
browserSync({
notify: false, // 是否开启浏览器提示
port: 9000, // 端口
server: {
baseDir: ['src']
}
});
gulp.watch('./src/*.html', reload); //监听html目录下所有文件
});
//清楚dist目录下所有文件
gulp.task('clean', function () {
return gulp.src('./dist/', {
read: false
})
.pipe(clean());
});
//定义html任务
gulp.task('move-html', function () {
gulp.src("./src/*.html") //找到src文件夹下的所有html
.pipe(gulp.dest("./dist")) //压缩完成后的文件另存到dist/目录下
});
gulp.task("move-script", function () {
gulp.src("./src/js/*.js") //找到js文件夹下的所有js
.pipe(uglify()) //压缩文件
.pipe(gulp.dest("dist/js")) //压缩完成后的文件另存到dist/js/目录下
});
gulp.task("move-style", function () {
gulp.src("./src/css/*.css") //找到css文件夹下的所有css
.pipe(minifyCSS()) //压缩文件
.pipe(gulp.dest("dist/css")) //压缩完成后的文件另存到dist/css/目录下
});
//定义看守任务
gulp.task('watch', function () {
// gulp.watch('public/*.html').on('change', reload);
gulp.watch('./src/*.html', reload); //监听html目录下所有文件
});
gulp.task('move', ['move-style', 'move-script', 'move-html']);
// release
gulp.task('build', function (cb) {
runSequence(
'clean', // 第一步:清理目标目录
'move', // 第二步:打包
cb
);
});
// dev
gulp.task('default', ['devServer']);
本地开发
gulp default
发布
gulp build