简单的gulp应用

简单的gulp应用

使用方法

1. 全局安装gulp
   npm install --global gulp
2. 安装gulp到项目目录
   npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件,把下面的代码拷贝到该文件中

   
   var gulp = require('gulp');
   gulp.task('default', function() {
     // 将你的默认的任务代码放在这
   });

4. 运行 gulp , 在命令窗口输入
   gulp 任务名

---

代码

var gulp = require('gulp'),
    //less  ->  css
    less = require('gulp-less'),
    //css压缩
    cssmin = require('gulp-cssmin'),
    //添加css前缀
    autoprefixer = require('gulp-autoprefixer'),
    //图片压缩
    imagemin = require('gulp-imagemin'),
    //js压缩
    uglify = require('gulp-uglify'),
    //html压缩
    htmlmin = require('gulp-htmlmin');
    //替换
    revCollector = require('gulp-rev-collector');

// 处理css
gulp.task('css', function () {

    return gulp.src('./css/*.css')
        //less -> css
        //.pipe(less())
        .pipe(cssmin())
        .pipe(autoprefixer())
        .pipe(gulp.dest('./release/css/'))
});

// 处理图片
gulp.task('images', function () {
    return gulp.src(['./images/**/*'], {base: './'})
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
        .pipe(gulp.dest('./release'))
});

//处理js
gulp.task('js', function () {
    return gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./release/js/'))
});
//处理html
gulp.task('html', function() {
  return gulp.src('./*.html')
  .pipe(htmlmin({
    collapseWhitespace: true,//压缩HTML
    removeComments: true,//清除HTML注释
    collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
      removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      minifyJS: true,//压缩页面JS
      minifyCSS: true//压缩页面CSS
  }))
  .pipe(gulp.dest('./copy'));
});