学习网站：http://www.vuexx.com/
gulp常用方法
#引入gulp模块 var gulp = require()
1.gulp.task：定义任务
2.gulp.src：找到需要执行任务的文件
3.gulp.dest：执行任务文件的去处
4.gulp.watch：观察文件是否发生变化(观察者)
主要功能
#定义默认任务
#拷贝文件
#压缩图片
#压缩js文件
#把sass转换为css
#claen清理任务
#代码压缩（同时合并）
#文件观察模式（自动任务）
执行方法
命令行方式 gulp.task(任务名称，function(){
具体任务
});
示例，定义默认任务：
//gulp默认任务
//默认任务名称必须是"default"，只需要输入gulp就可以执行了
gulp.task('default',function() {
console.log("gulp默认任务");
});
拷贝文件
1.不需要第三方，默认gulp自带
2.//拷贝文件，把scr文件下的所有的html文件拷贝到dest文件下面，如果dest文件么有，就自动创建
gulp.task('copyHtmls',function() {
gulp.src('src/*.html')
.pipe(gulp.dest('dest'));
});
3.调用：gulp copyHtmls
图片压缩
1.先下载模块 命令行：npm install gulp-imagemin --save-dev
2.引入模块 var imagemin = require('gulp-imagemin');
3.代码
gulp.task('imagemin',function() {
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dest/images'));
});
4.调用 gulp imagemin
压缩js文件
1.先下载模块 命令行 npm install gulp-uglify --save-dev
2.引入模块 var uglify = require('gulp-uglify');
3.代码
gulp.task('uglify',function() {
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dest/js'));
});
4.调用 gulp uglify
压缩sass为css
1.先下载模块 命令行 npm install gulp-sass --save-dev
2.引入模块 var sass = require('gulp-sass');
3.代码
//压缩sass为css
gulp.task('sass',function() {
gulp.src('src/sass/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('dest/css'));
});
4.调用 gulp sass
代码合并
1.先下载模块 命令行npm install gulp-concat --save-dev
2.引入模块 var concat = require('gulp-concat');
3.代码：合并代码的的时候，同时压缩代码
//代码合并:合并的时候，也压缩代码
gulp.task('scripts',function() {
gulp.src('src/js/*.js')
.pipe(concat("main.js"))
.pipe(uglify())
.pipe(gulp.dest('dest/js'))
});
4.调用 gulp scripts
clean任务
1.每次重新运行gulp的时候，把原来的文件删除
2.代码
gulp.task('claen',function() {
del(['./dist'],cb)
});
3.调用 gulp clean
4.可以把clean任务添加到默认任务中，自动执行
自动监听文件（观察者）
1.代码
gulp.task('watch', function(){
gulp.watch('src/js/*.js', ['scripts']);
gulp.watch('src/images/*', ['imageMin']);
gulp.watch('src/sass/*.scss', ['sass']);
gulp.watch('src/*.html', ['copyHtml']);
});
2.自动任务
gulp.task('default', ['message', 'copyHtml', 'imageMin', 'sass', 'scripts']);
运行后不会停止，每次文件有修改都会自动进行定义好的任务，非常方便