gulp
npm install gulp -g # gulp 使用3.x 版本
npm install gulp --save-dev
{
"name": "test",
"version": "1.0.0",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-htmlmin": "^5.0.1",
"gulp-less": "^4.0.1",
"gulp-livereload": "^4.0.2",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2",
"open": "^7.0.4"
}
}
var gulp = require("gulp");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var less = require("gulp-less");
var cssClean = require("gulp-clean-css");
var html = require('gulp-htmlmin');
var livereload = require('gulp-livereload');
var connect = require('gulp-connect');
var open = require('open');
// 注册任务
// gulp.task("sss",function ddd () {
// // 配置任务的操作
//
// })
// 注册合并js任务
gulp.task("js",function () {
return gulp.src('src/js/*.js') // 加载文件到内存
.pipe(concat('build.js')) // 合并文件
.pipe(gulp.dest('dist/js/')) // 输出文件到本地
.pipe(uglify()) // 压缩文件
.pipe(rename({suffix:'.min'})) // 重命名
.pipe(gulp.dest('dist/js/')) // 输出文件到本地
.pipe(livereload())
.pipe(connect.reload())
});
// 注册转换less的任务
gulp.task('less',function () {
return gulp.src('src/less/*.less')
.pipe(less()) // 编译less
.pipe(gulp.dest('src/css/'))
.pipe(livereload())
.pipe(connect.reload())
});
// 注册css任务
gulp.task("css",['less'],function () {
return gulp.src('src/css/*.css')
.pipe(concat("build.css")) // 合并css
.pipe(rename({suffix:'.min'})) // 压缩后缀
.pipe(cssClean({compatibility:'ie8'})) // 兼容ie8
.pipe(gulp.dest("dist/css/"))// 输出css
.pipe(livereload())
.pipe(connect.reload())
});
//处理html
gulp.task("html",function () {
return gulp.src('index.html')
.pipe(html({collapseWhitespace:true}))
.pipe(gulp.dest('dist/'))
.pipe(livereload())
.pipe(connect.reload())
});
// watch 任务 半自动
gulp.task('watch',['default'],function () {
livereload.listen(); // 开启监听
// 确定监听的目标 以及绑定的任务
gulp.watch('src/js/*/js',['js']);
gulp.watch(['src/css/*.css','src/less/*.less'],['css']);
gulp.watch(['index.html'],['html'])
});
// 全自动
gulp.task('server',['default'],function () {
// 配置服务器的选项
connect.server({
root:'dist/',
livereload: true,
port:5000
});
// 确定监听的目标 以及绑定的任务
gulp.watch('src/js/*/js',['js']);
gulp.watch(['src/css/*.css','src/less/*.less'],['css']);
gulp.watch(['index.html'],['html']);
open('http://localhost:5000/')
});
// 注册默认
gulp.task("default",['js','less','css','html']); // 异步
gulp-concat 合并jscss文件
gulp-uglify 压缩js文件
gulp-rename 文件重命名
gulp-less 编译less
gulp-clean-css 压缩css
gulp-livereload 动态加载文件
gulp-htmlmin 压缩html
gulp-connect 自动刷新页面
open 自动打开浏览器
npm install gulp-concat gulp-uglify gulp-rename gulp-less gulp-clean-css gulp-livereload gulp-htmlmin gulp-connect open --save-dev
gulp.src() // 载入文件到内存
gulp.dest() // 内存输出到文件
gulp.task() // 创建gulp任务
gulp.watch()// 监听文件变化 执行任务