易于使用
通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
构建快速
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
插件高质
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
* 1.安装全局变量 * 命令：npm install --global gulp * 2.在项目中安装依赖 * 命令：npm install --save-dev gulp * 3.创建gulpfile文件 * 4.书写配置文件 * 5.配置默认任务 * 6.执行gulp
* * 语法： * 1.gulp.src:方法来读取你需要操作的文件 * 语法：gulp.src(globs[, options]) * 2.gulp.dest:方法是用来写文件的 * 语法：gulp.dest(path[,options]) * 3.gulp.task:方法用来定义任务 * 语法：gulp.task(name[, deps], fn) * 4.gulp.watch:用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等 * 语法：gulp.watch(glob[, opts], tasks) *
gulp常用插件 * (1):js文件压缩： * 使用gulp-uglify * 安装：npm install --save-dev gulp-uglify * (2):css文件压缩： * 使用gulp-minify-css * 安装：npm install --save-dev gulp-minify-css * (3):html文件压缩: * 使用gulp-minify-html * 安装：npm install --save-dev gulp-minify-html * (4):js代码检查: * 使用gulp-jshint * 安装：npm install –save-dev jshint gulp-jshint * (5):文件合并 * 使用gulp-concat * 安装：npm install --save-dev gulp-concat * (6):重命名 * 使用gulp-rename * 安装：npm install --save-dev gulp-rename * (7):less和sass的编译 * less使用gulp-less,安装：npm install --save-dev gulp-less * sass使用gulp-sass,安装：npm install --save-dev gulp-sass * (8):图片压缩 * 可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。 * 安装：npm install --save-dev gulp-imagemin * (9):自动刷新 * 使用gulp-livereload插件 * 安装:npm install --save-dev gulp-livereload。
var gulp = require("gulp");
uglify = require("gulp-uglify");
minifyCss = require("gulp-minify-css");
minifyHtml = require("gulp-minify-html");
jsHint = require("gulp-jshint");
concat = require("gulp-concat");
rename = require("gulp-rename");
gulp.task("minify-js",function () {
gulp.src("js/*.js")
.pipe(uglify())
.pipe(gulp.dest("dist/js"));
});
gulp.task("minify-js-app",function () {
gulp.src("js/app/*.js")
.pipe(uglify())
.pipe(gulp.dest("dist/js/app"));
});
gulp.task("minifyCss",function () {
gulp.src("css/*.css")
.pipe(minifyCss())
.pipe(gulp.dest("dist/css"));
});
gulp.task("minifyHtml",function () {
gulp.src("*.html")
.pipe(minifyHtml())
.pipe(gulp.dest("dist/"));
});
//代码检查
gulp.task("jshint",function () {
gulp.src("js/*.js")
.pipe(jsHint())
.pipe(jsHint.reporter());
});
//合并
gulp.task('concat', function () {
gulp.src('js/*.js') //要合并的文件
.pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
.pipe(gulp.dest('dists/js'));
});
// 合并、压缩、重命名js
gulp.task('js', function() {
return gulp.src('js/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('dest/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dests/'));
});
gulp.task('compile-less', function () {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
// gulp.task('compile-sass', function () {
// gulp.src('sass/*.sass')
// .pipe(sass())
// .pipe(gulp.dest('dist/css'));
// });
// gulp.task('minify-img', function () {
// return gulp.src('images/*')
// .pipe(imagemin({
// progressive: true,
// use: [pngquant()] //使用pngquant来压缩png图片
// }))
// .pipe(gulp.dest('dist/images'));
// });
// 合并、压缩、重命名css
gulp.task('css', function() {
return gulp.src('css/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('dest/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifyCss())
.pipe(gulp.dest('dests/'));
});
//下面是一个监听
gulp.task('jsjt', function() {
gulp.src('js/*.js')
.pipe(less())
.pipe(gulp.dest('dist/js'))
.pipe(livereload());
});
gulp.task("default",function () {
gulp.start("minify-js","minify-js-app","minifyCss","minifyHtml","concat","js","css");
// console.log("hello gulp");
});