gulp压缩文件

搭建gulp其实很简单，就俩步骤——在项目根目录下安装所需组件，并配置一份gulpfile.js。

我们假设我们有一个放在D盘下的项目 D:/project，里面的文件结构是这样的：



我们打算利用gulp把RAW文件夹下的js和sass文件编译/压缩后都输出到COMPRESS文件夹下。

 

一. 安装组件

gulp自己有官方的组件推荐/查找页面（点我进入），就我们上述项目要求而言，我个人推荐下述几个组件：

　　gulp 　　//这个是必须安装的，没有它，其它组件都用不了（注意watch组件直接集成在gulp中了，无需额外安装watch组件）
　　gulp-sass 　　 //编译sass用的
　　gulp-sourcemaps 　　 //编译sass时生成额外的.map文件用的（有啥用？看我这篇文章）
　　gulp-mini-css 　　 //压缩css使用的
　　gulp-uglify 　　 //压缩、混淆js文件用的

组件的安装很简单，直接npm安装即可，比如安装gulp：

npm install gulp




组件全部安装完成后会在你的项目根目录下生成一个node_modules文件夹，用来存放组件模块：



 

二. gulpfile.js文件配置

如同Grunt需要配置Gruntfile.js文件来告知node我要用什么组件并以怎样的流程来执行任务，gulp也需要在项目根目录配置一个gulpfile.js文件。
我们新建一个gulpfile.js文件，先在之中输入下面内容：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    mincss = require('gulp-mini-css'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify');

接着我们进一步配置文件，告诉node我们具体要以怎样的流程来执行任务，这是完整的gulpfile.js文件内容：



var gulp = require('gulp'),
    sass = require('gulp-sass'),
    mincss = require('gulp-mini-css'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify');

var raw_css = './RAW/css',
    com_css = './COMPRESS/css',
    raw_js = './RAW/js',
    com_js = './COMPRESS/js';

gulp.task('sass', function () {
    gulp.src(raw_css+'/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(mincss())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest(com_css));
});

gulp.task('mincss', function () {
    gulp.src(com_css+'/**/*.scss')
        .pipe(mincss())
        .pipe(gulp.dest(com_css));
});

gulp.task('minjs', function () {
    gulp.src(raw_js+'/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest(com_js));
});

gulp.task('watch', function () {
    gulp.watch(raw_css+'/**/*.scss',['sass']);
    gulp.watch(raw_js+'/**/*.js',['minjs']);
});

gulp.task('default',function(){
    gulp.run('sass','minjs','mincss');
    gulp.run('watch');
});

我们拿写的最长的sass编译模块配置代码块来注释说明下：


//每个gulp.task(name, fn)都是一个任务配置模块，如本代码段定义了名为"sass"的任务的执行流程
gulp.task('sass', function () {    
    gulp.src(raw_css+'/**/*.scss')   //gulp.src(glob)返回了一个可读的stream，如此行返回了RAW/css/下的全部（包含子文件夹里的）.scss文件流
        .pipe(sourcemaps.init())  //.pipe()管道化执行组件任务，此处调用gulp-sourcemaps的初始化api来处理接收的文件流（方便后续编译出.map文件）
        .pipe(sass())         //执行gulp-sass组件任务，把.scss文件流编译为.css文件流
        .pipe(sourcemaps.write('/'))      //调用gulp-sourcemaps的写入api，额外输出.map文件流
        .pipe(mincss())     //执行gulp-mini-css组件任务，压缩所有css文件流
        .pipe(gulp.dest(com_css));   //gulp.dest(glob)返回一个可写的stream，如此行是将文件流写入到 COMPRESS/css 里的对应路径下
});

 接着看看末尾处的两个代码段：


gulp.task('watch', function () {  //定义名为"watch"的任务
    gulp.watch(raw_css+'/**/*.scss',['sass']);   //监听 RAW/css 下的全部.scss文件，若有改动则执行名为'sass'任务
    gulp.watch(raw_js+'/**/*.js',['minjs']);   //监听 RAW/js 下的全部.js文件，若有改动则执行名为'minjs'任务
});

gulp.task('default',function(){  //每个gulpfile.js里都应当有一个dafault任务，它是缺省任务入口（类似C语言的main()入口），运行gulp的时候实际只是调用该任务（从而来调用其它的任务）
    gulp.run('sass','minjs','mincss');   //gulp.run(tasks)表示运行对应的任务，这里表示执行名为'sass','minjs','mincss'的三个任务
    gulp.run('watch');    //执行'watch'监听任务
});



上述的两个步骤做好后，直接输入运行 gulp 指令即可（我是在webstorm里直接写命令的）：



同时可以看到COMPRESS文件夹下已经有了我们想要的编译、压缩后的文件：



另外这时候gulp已转入监听模式（虽然不像Grunt那样有“watch...”的提示），只要你修改了被监听的文件，任务会立即被执行一遍，无需再手动gulp一次。