gulp基础使用

• 全局安装gulp

//可以去官网下载node，顺便就把npm给装上了

npm install gulp -g

• 项目本地安装gulp

//进入到项目目录后
npm install gulp --save-dev

• 安装gulp插件

  //安装几个常用功能的插件

//jshint js语法检查
//sass sass编译成css
//concat 代码拼接
//rename 文件重命名
//uglify 代码压缩

npm install jshint gulp-jshint gulp-sass gulp-concat gulp-rename gulp-uglify --save-dev
//这里如果只安装gulp-jshint,不安装jshint会报错

• 新建gulpfile.js文件

//gulpfile.js

//引入组件
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

//gulp只有5个方法： src dest task run watch

//创建js语法检查任务
gulp.task('lint',function () {
    gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
})
//js代码合并、压缩
gulp.task('script',function () {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'))
})
//sass文件编译成css
gulp.task('css',function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'))
})

//敲个gulp，执行上面所有任务


//写法一：：run方法已经被废弃
// gulp.task('default',function () {
//     gulp.run('lint','script','css');
//     //监听任意js文件有改动，重新执行lint、script任务
//     gulp.watch('./js/*.js',function () {
//         gulp.run('lint','script');
//     })
// })

//写法二
gulp.task('default',['lint','script','css'],function () {
    //监听任意js文件有改动，重新执行lint、script任务
    gulp.watch('./js/*.js',['lint','script','css']);
});

• 运行gulpfile.js文件

gulp //或者 gulp default

本文参照http://www.jianshu.com/p/ace7b3adb542