gulp教程

1.初始化package.json

$ npm init

2.安装gulp

$ npm install gulp -g
$ npm install gulp --save-dev

3.安装gulp外挂

  编译Sass (gulp-ruby-sass)
  Autoprefixer (gulp-autoprefixer)
  缩小化(minify)CSS (gulp-minify-css)
  JSHint (gulp-jshint)
  拼接 (gulp-concat)
  丑化(Uglify) (gulp-uglify)
  图片压缩 (gulp-imagemin)
  即时重整(LiveReload) (gulp-livereload)
  清理档案 (gulp-clean)
  图片快取，只有更改过得图片会进行压缩 (gulp-cache)
  更动通知 (gulp-notify)
$ 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

4.创建gulpfile.js载入外挂

  ①require导入外挂

  var gulp = require('gulp'),  
    sass = require('gulp-ruby-sass'), //编译sass
    autoprefixer = require('gulp-autoprefixer'), //自动添加前缀
    minifycss = require('gulp-minify-css'), //css压缩
    jshint = require('gulp-jshint'), //js文件检查
    uglify = require('gulp-uglify'), //压缩js文件，减小文件大小
    imagemin = require('gulp-imagemin'), //压缩图片
    rename = require('gulp-rename'), //重命名
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

  ②定义自动化任务，每个pipe代表一次操作

  gulp.task('styles', function() {   //此任务作用为输入sass文件，输出扩展版css及压缩版css
  return gulp.src('src/styles/main.scss') //sass文件路径
    .pipe(sass({ style: 'expanded' })) //sass文件为扩展类型
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))//自动添加前缀
    .pipe(gulp.dest('dist/assets/css')) //输出扩展版本
    .pipe(rename({suffix: '.min'})) //添加后缀
    .pipe(minifycss()) //缩小化css
    .pipe(gulp.dest('dist/assets/css')) //输出压缩版本
    .pipe(notify({ message: 'Styles task complete' }));//更新通知
   });


  gulp.task('scripts', function() {     //此任务作用为拼接及缩小化js
  return gulp.src('src/scripts/**/*.js') //js文件路径
    .pipe(jshint('.jshintrc')) //js风格检查
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js')) //输出js文件
    .pipe(rename({suffix: '.min'})) //添加前缀
    .pipe(uglify()) //压缩js文件
    .pipe(gulp.dest('dist/assets/js')) //输出js文件
    .pipe(notify({ message: 'Scripts task complete' }));
  });


  gulp.task('images', function() {     //此任务用作压缩图片
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/assets/img'))
    .pipe(notify({ message: 'Images task complete' }));
  });


  gulp.task('clean', function() {   //清除目的地目录并重建档案
  return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], {read: false})
    .pipe(clean());
  });


  gulp.task('default', ['clean'], function() {   //预设任务，当直接输入gulp时可执行。
    gulp.start('styles', 'scripts', 'images');
  });


  gulp.task('watch', function() {      //监听文件变动，自动执行任务，$ gulp watch来开始看守档案


  // 看守所有.scss档
  gulp.watch('src/styles/**/*.scss', ['styles']);
  // 看守所有.js档
  gulp.watch('src/scripts/**/*.js', ['scripts']);
  // 看守所有图片档
  gulp.watch('src/images/**/*', ['images']);
  });


  gulp.task('watch', function() {       //Gulp也可以处理档案更动后，自动重新整理页面。我们需要修改watch任务，设置即时重整伺服器。
  // 建立即时重整伺服器
  var server = livereload();
  // 看守所有位在 dist/  目录下的档案，一旦有更动，便进行重整
  gulp.watch(['dist/**']).on('change', function(file) {
    server.changed(file.path);
    });

  });

原文出处：http://www.open-open.com/lib/view/open1417068223049.html