学习网站：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']);

运行后不会停止，每次文件有修改都会自动进行定义好的任务，非常方便

学习网站：http://www.vuexx.com/