前端构建工具--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'),                 //基础库
    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');            //只操作有过修改的文件

// HTML处理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
    htmlDst = './dist/';

gulp.src(htmlSrc)
    .pipe(gulp.dest(htmlDst))
});

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

gulp.src(cssSrc)
    .pipe(sass({ style: 'expanded'}))
    .pipe(gulp.dest(cssDst))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest(cssDst));
});

// 图片处理
gulp.task('images', function(){
    var imgSrc = './src/images/**/*',
        imgDst = './dist/images';
    gulp.src(imgSrc)
        .pipe(changed(imgDst))
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
})

// js处理
gulp.task('js', function () {
var jsSrc = './src/js/*.js',
    jsDst ='./dist/js';

gulp.src(jsSrc)
    .pipe(jshint('.jshintrc'))
    .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(['./dist/css', './dist/js', './dist/images'], {read: false})
    .pipe(clean());
});

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

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

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

    // 监听html
    gulp.watch('./src/*.html', function(event){
        gulp.run('html');
    })

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

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

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

});

});