gulp初试

标签：

1.要在node环境下

2.

全局安装npm install gulp -g   

项目中安装npm install gulp --save-dev 

3.安装插件

• sass的编译（gulp-ruby-sass）
• 自动添加css前缀（gulp-autoprefixer）
• 压缩css（gulp-minify-css）
• js代码校验（gulp-jshint）
• 合并js文件（gulp-concat）
• 压缩js代码（gulp-uglify）
• 压缩图片（gulp-imagemin）
• 自动刷新页面（gulp-livereload）
• 图片缓存，只有图片替换了才压缩（gulp-cache）

  var gulp = require(‘gulp‘),
      minifycss = require(‘gulp-minify-css‘),
      concat = require(‘gulp-concat‘),
      uglify = require(‘gulp-uglify‘),
      rename = require(‘gulp-rename‘),
      del = require(‘del‘);
  gulp.task(‘minifycss‘, function() {
      return gulp.src(‘css/*.css‘)      //压缩的文件
          .pipe(concat(‘main.css‘))
          .pipe(minifycss())  //执行压缩
          .pipe(gulp.dest(‘minified/css‘)) ;  //输出文件夹
  });
  gulp.task(‘minifyjs‘, function() {
      return gulp.src(‘js/*.js‘)
          .pipe(concat(‘main.js‘))    //合并所有js到main.js
          .pipe(gulp.dest(‘minified/js‘))    //输出main.js到文件夹
          .pipe(rename({suffix: ‘.min‘}))   //rename压缩后的文件名
          .pipe(uglify())    //压缩
          .pipe(gulp.dest(‘minified/js‘));  //输出
  });
  gulp.task(‘clean‘, function(cb) {
      del([‘minified/css‘, ‘minified/js‘], cb)
  });
  gulp.task(‘default‘,function() {
      gulp.start(‘minifycss‘, ‘minifyjs‘);
  });
  

  　　在cmd中运行gulp即可。

• 更改提醒（gulp-notify）
• 清除文件（del）

安装这些插件需要运行如下命令：

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

4.在项目根目录创建gulpfile.js

gulp初试

标签：

原文地址：http://www.cnblogs.com/lichaoqing/p/5676917.html