gulp_安装和使用

         gulp前端构建工具，其功能和grunt一样但运行起来比grunt快。gulp和grunt的区别是，gulp书写方式跟nodejs相同，操作的是二进制流，而grunt书写方式一个json又一个json，相对会慢一些。

下面具体讲gulp的安装和使用；

1、首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

npm install  -global  gulp-cli                                                                                                    sudo npm install -global gulp-cli

注意：sudo是以管理员身份执行命令，一般会要求输入电脑密码

2、安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v

3、全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行

cd                                                                                                                                            npm install --save-dev gulp

注意：① 、--save-dev 来更新package.json文件中“devDependencies”值；②、mac如果不知道如何把目录切换到你的项目文件夹时，可以将把文件拖到命令窗口中（会自动生成路径）

4、首先，我们自己需要弄清楚项目需要哪些任务。根据项目需求安装需要的模块

npm install  gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache   --save-dev

注意：如果以上命令提示权限错误，需要添加 sudo 再次尝试。

5、建立gulpfile.js文件，放到你的项目目录中。然后在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例；

// 引入 gulp

var gulp = require('gulp');

// 引入组件

var jshint = require('gulp-jshint');  //用来检查js代码

var sass = require('gulp-sass');

var concat = require('gulp-concat');   //合并文件

var uglify = require('gulp-uglify');

var rename = require('gulp-rename');

// 检查脚本

gulp.task('uglify:js',function(){

       gulp.src('src/js/*.js')

      .pipe(uglify())

      .pipe(concat('main.min.js'))

      .pipe(gulp.dest('build/js'))

});

gulp.task('uglify:img',function(){

       gulp.src('src/img/*.gif')

      .pipe(imagemin())

      .pipe(gulp.dest('build/img'))

});

gulp.task('uglify:html',function(){

        gulp.src('src/new.html')

       .pipe(htmlmin({  collapseWhitespace:true  }))

       .pipe(gulp.dest('build/new.html'))

});

// 编译Sass

gulp.task('sass', function() {

          gulp.src('./scss/*.scss')

          .pipe(sass())

         .pipe(gulp.dest('./css'));

});

// 合并，压缩文件

gulp.task('scripts', function() {

          gulp.src('./js/*.js')

         .pipe(concat('all.js'))

         .pipe(gulp.dest('./dist'))

         .pipe(rename('all.min.js'))

         .pipe(uglify())

          .pipe(gulp.dest('./dist'));

});

// 监听文件变化

gulp.watch('src/new.html',['uglify:html']);

gulp.watch('./js/*.js', function(){gulp.run('lint', 'sass', 'scripts');});

//注册默认任务

gulp.task('default',['uglify:css','uglify:js','uglify:img','uglify:html']);

注意：gulp只有五个方法： task ， run ， watch ， src ，和 dest

gulp     官网：http://gulpjs.com/         

 插件：http://gulpjs.com/plugins