gulp使用4.常用的gulp插件

[damoclesX]

平时工作中，会遇到代码压缩，代码合并等需求，使用gulp的插件能很好的满足这些需求

gulp崇尚的是每个插件只做一件事，并且把这件事做的很好，代码压缩只是做压缩，不做其他的事情，代码压缩后，如果直接输出，压缩后的代码会覆盖原来的代码，于是还要配合gulp-rename使用，rename专门负责文件名称的更改

css压缩

npm install gulp  gulp-minify-css gulp-rename

var gulp = require('gulp'),
      rename = require('gulp-rename'),
      minify = require('gulp-minify-css');

gulp.task('minify',function(){
  gulp.src(['*.css','!*.min.css'])
         .pipe(minify())
         .pipe(rename({
            suffix:'.min'
          }))
          .pipe(gulp.dest('/dist'))
})

执行:

gulp minify

在npm安装gulp,gulp-rename的基础上

javascript压缩

npm install gulp-uglify

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

gulp.task('uglify',function(){
   gulp.src(['*.js','!*.min.js'])
          .pipe(uglify())
          .pipe(rename({
            suffix:'.min'
          }))
          .pipe(gulp.dest('/dist'))
})

执行:

gulp uglify

代码合并

npm install gulp-concat

var gulp = require('gulp'),
      concat = require('gulp-concat');

gulp.task('concat',function(){
  gulp.src(['*.css'])
        .pipe(concat('all.css'))
        .pipe(gulp.dest('/dist'))
})

执行:

gulp concat

工作中还有很多需求，都可以借助gulp的插件来完成。都可以在gulp的插件找到合适的