安装包
1. cnpm install gulp-concat gulp-uglify gulp-rename gulp-clean-css gulp-htmlmin-S
2. cnpm install gulp-livereload gulp-connect -S
代码目录结构
gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat'); // 合并js,css
var uglify = require('gulp-uglify'); // 压缩 js
var rename = require('gulp-rename'); // 重命名
var cleanCss = require('gulp-clean-css'); // 压缩 css
var htmlMin = require('gulp-htmlmin'); //压缩 html
var livereload = require('gulp-livereload');//自动编译
var connect = require("gulp-connect"); //热加载
// 只压缩js
gulp.task('js',function(){
return gulp.src('src/js/*.js').pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
// 压缩 合并 js
gulp.task('js-concat',function(){
return gulp.src('src/js/*.js')
.pipe(concat('c.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(rename('c.min.js'))
.pipe(gulp.dest('dist/js'))
.pipe(livereload())
.pipe(connect.reload());
})
// 压缩 合并 css
gulp.task('css-concat',function(){
return gulp.src('src/css/*.css')
.pipe(concat('index.css'))
.pipe(gulp.dest('dist/css'))
.pipe(cleanCss())
.pipe(rename('index.min.css'))
.pipe(gulp.dest('dist/css'))
.pipe(livereload())
.pipe(connect.reload());
})
// 压缩 html
gulp.task('html',function(){
return gulp.src('src/index.html')
.pipe(htmlMin({collapseWhitespace:true}))
.pipe(gulp.dest('dist'))
.pipe(livereload())
.pipe(connect.reload());
})
// 开发时自动构建(半自动)
gulp.task('watch', ['default'], function() {
// 开启监听
livereload.listen();
// 监听相应文件变化，启动相应任务
gulp.watch('src/js/*.js', ['js-concat']);
gulp.watch('src/css/*.css', ['css-concat']);
gulp.watch('src/index.html', ['html']);
});
// 开发时自动构建(全自动，热加载)
gulp.task("server", ['default'],function(){//配置热更新服务器
connect.server({
root: "dist",
livereload: true,
port: 8090
})
// 监听相应文件变化，启动相应任务
gulp.watch('src/js/*.js', ['js-concat']);
gulp.watch('src/css/*.css', ['css-concat']);
gulp.watch('src/index.html', ['html']);
})
// 构建
gulp.task('default',['js-concat','css-concat','html'],function(){
console.log('构建完毕ok');
});
构建时执行：gulp 命令即可
开发时执行：gulp server
转播
