gulp入门-压缩js/css文件（windows）

类似于grunt，都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

工具/原料

• nodejs/npm

方法/步骤

1. 首先要确保pc上装有node，然后在global环境和项目文件中都install gulp

   npm install gulp -g   (global环境)

   npm install gulp --save-dev (项目环境)

   

    
2.  

   在项目中install需要的gulp插件，一般只压缩的话需要

   npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

   更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins/

   注：gulp-minify-css（css压缩）、 gulp-concat（文件合并）、 gulp-uglify（js压缩）、 gulp-rename（重命名文件）

3.  

   在项目的根目录新建gulpfile.js，require需要的module

   var gulp = require('gulp'),
   
       minifycss = require('gulp-minify-css'),
   
       concat = require('gulp-concat'),
   
       uglify = require('gulp-uglify'),
   
       rename = require('gulp-rename'),
   
       del = require('del');

4.  压缩css

   gulp.task('minifycss', function() {
   
       return gulp.src('src/*.css')      //压缩的文件
   
           .pipe(gulp.dest('minified/css'))   //输出文件夹
   
           .pipe(minifycss());   //执行压缩
   
   });

5.  压缩js

   gulp.task('minifyjs', function() {
   
       return gulp.src('src/*.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'));  //输出
   
   });

6.  执行压缩前，先删除文件夹里的内容

   gulp.task('clean', function(cb) {
   
       del(['minified/css', 'minified/js'], cb)
   
   });

7.  默认命令，在cmd中输入gulp后，执行的就是这个命令

   gulp.task('default', ['clean'], function() {
   
       gulp.start('minifycss', 'minifyjs');
   
   });

   
8.  然后只要cmd中执行，gulp即可