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文件编译成cssgulp.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