前端构建工具--Gulp的使用

gulp是基于Nodejs的自动任务运行器，能自动化地完成JavaScript、sass、less

html、css、image等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在该改动后重复指定的这些步骤。在实现上，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp的安装

gulp是基于Nodejs的自动任务运行器，所以安装gulp之前要先安装Node.js环境，Nodejs的安装非常简单 只需在nodejs官网上下载，按照正常步骤安装即可。

全局安装gulp

在git bash中输入

npm install -g gulp
           

对gulp进行安装，安装完成后，可以通过

gulp -v
           

命令检测gulp的版本

全局安装gulp后，还需要在每个要使用gulp的项目中单独安装一次。把目录切换到项目文件夹中（在window中 可以通过 cd “文件路径”切换文件夹）

在项目文件夹下运行

npm install gulp --save-dev
           

–save:将保存配置信息至package.json（该文件是nodejs的项目配置文件。package.json是一个普通的json文件 不能添加任何注释）

-dev/-dep:保存至package.json的devDeoendencies节点，不指定-dev/dep将保存至dependencies节点。

注：package.json中的dependencies是项目在生产环境中需要的依赖，devDenpendencies是开发过程中所要依赖的包

安装完Gulp之后，可以运行npm init初始化package.json文件.

初始化之后，需要在项目的根目录下建立gulpfile.js文件，文件名不能修改，

该文件中定义gulp中的任务，它可以通过gulp命令来运行

gulp基础语法

gulp有五个方法：src、dest、task、run、watch

src和dest：指定源文件和处理后文件的路径

watch：用来监听文件的变化

task：指定任务

run:执行任务

插件安装

样式处理

css预处理样式/sass编译

安装该插件之前需要安装sass基于的ruby环境（官网下载），并且安装sass，

将这些安装完成后输入命令

npm install gulp-ruby-sass --save-dev
           

安装sass编译插件，通过在gulpfile.js文件中引入该插件，并对sass任务进行基础配置

即可

gulp-uglify js文件压缩

使用uglify引擎压缩js文件

安装命令

npm install gulp-uglify --save-dev
           

图片压缩 gulp-imagemin

gulp-imagemin 压缩png jpeg gif和svg图像

安装命令

npm install gulp-imagemin --save-dev
           

只操作有过修改的文件（gulp-changed）

该插件会首先把文件进行对比，如果文件没有改动，则跳过后序任务

安装命令

npm install gulp-changed --save-dev
           

编写gulp任务

// 引入 gulp及组件
var gulp    = require('gulp'),                 //基础库
    fs = require('fs'),
    path = require('path'),
    merge = require('merge-stream'),
    imagemin = require('gulp-imagemin'),       //图片压缩
    //sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css压缩
    jshint = require('gulp-jshint'),           //js检查
    uglify  = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean'),             //清空文件夹
    changed=require('gulp-changed'),            //只操作有过修改的文件
    pngquant = require('imagemin-pngquant');
var scriptsPath = 'public/javascripts'

// 样式处理
gulp.task('css', function () {
var cssSrc = 'public/stylesheets/*.css',
    cssDst = 'public/dist/css';

gulp.src(cssSrc)

    .pipe(gulp.dest(cssDst))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest(cssDst));
});

// 图片处理
gulp.task('images', function(){
    var imgSrc = 'public/images/**/*',
        imgDst = 'public/dist/images';
    gulp.src(imgSrc)
        .pipe(changed(imgDst))
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件))
        }))

        .pipe(gulp.dest(imgDst));
})

// js处理
function getFolders(dir){
    return fs.readdirSync(dir)
        .filter(function(file){
            return fs.statSync(path.join(dir,file)).isDirectory();
        })
}
gulp.task('js', function () {
var jsSrc = 'public/javascripts/*.js',
    jsDst ='public/dist/js';
var folders = getFolders(scriptsPath);

var tasks = folders.map(function(folder){
    //拼接成foldername.js
    //写入输出
    //压缩
    //重命名
    //再一次写入输出
    return gulp.src(path.join(scriptsPath,folder,'/*.js'))
        .pipe(concat(folder + '.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(uglify())
        .pipe(rename(folder + '.min.js'))
        .pipe(gulp.dest(jsDst));
})
return merge(tasks);

/*gulp.src(jsSrc)
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest(jsDst))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest(jsDst));*/
});

// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(['public/dist/css', 'public/dist/js', 'public/dist/images'], {read: false})
    .pipe(clean());
});

 // 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('css','images','js');
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){

    server.listen(port, function(err){
        if (err) {
         return console.log(err);
     }

    // 监听js
    gulp.watch('public/javascripts/*.js', function(){
        gulp.run('js');
    });

    // 监听css
    gulp.watch('public/stylesheets/*.css', function(){
        gulp.run('css');
    });

    // 监听images
    gulp.watch('public/images/*', function(){
        gulp.run('images');
    });
    });

});
           

运行任务

使用命令gulp可以运行gulpfile.js 中的任务。比如当需要压缩js文件时，由于压缩js的任务名为‘js’运行命令

gulp js
           

即可压缩js文件