gulp

全局安装

npm install gulp -p
gulp -v 出现版本号即为正确安装

gulp是基于nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务

    文件合并---gulp concat
    文本拷贝---gulp copy
    文本替换---gulp replace
    图片压缩---gulp imagemin
    css压缩----gulp cssmin
    js压缩-----gulp uglify
    less转为css--gulp less

常用的插件名称

    gulp-less 编译LESS文件
    gulp-autoprefixer 添加CSS私有前缀
    gulp-cssmin 压缩CSS
    gulp-rname重命名
    gulp-imagemin 图片压缩
    gulp-uglify 压缩Javascript
    gulp-concat 合并
    gulp-htmlmin 压缩HTML
    gulp-rev 添加版本号
    gulp-rev-collector 内容替换
    gulp-useref
    gulp-if

gulp API

gulp.task()定义各种不同的任务
gulp.src()需要构建资源的路径，字符串或数组
gulp.pipe()管道，将需要构建的资源输送给插件
gulp.dest()构建任务完成后资源存放的路径（会自动创建）
gulp.watch()

构建项目：

1、git checkout -b release---创建release分支
2、npm init 初始化一个项目

本地安装

3、npm install gulp --save-dev(会在package.json记录依赖关系)

构建清单

4、手动创建gulpfile.js文件

定义构建任务

var gulp = require("gulp");----引入本地安装的gulp

//返回值gulp是一个对象，借助此对象可以实现任务清单的定制

//定义任务

gulp.task("less",function(){
    console.log(1);
});

在git中执行gulp less

[11:26:06] Using gulpfile
D:\www\js_mianshi\wedding\wedding\gulpfile.js
[11:26:06] Starting 'less'...
1
[11:26:06] Finished 'less' after 8.13 ms

安装less转为css的包

npm install gulp-less

在js文件中引入var less = require("gulp-less");

代码如下：

    //引入本地安装的gulp

    var gulp = require("gulp");

    var less = require("gulp-less");

    var cssmin = require("gulp-cssmin");

    //返回值gulp是一个对象，借助此对象可以实现任务清单的定制

    //定义任务

    gulp.task("less",function(){
        //借助src来制定less文件位置
        gulp.src("./css/*.less")
            .pipe(less())
            .pipe(autorefixer())
            .pipe(cssmin())
            .pipe(gulp.dest("./release/css"));
        //借助gulp插件来实现less转为css的操作
    });

    在git中执行gulp less

压缩图片

//处理图片
gulp.task("image",function(){
    gulp.src("./images/*")----若写**，则image下面的文件夹中图片也会压缩传递，否则是空文件夹
        .pipe(imageMin())
        .pipe(gulp.dest("./release/images"));
});

压缩js

gulp.task("js",function(){
gulp.src("./js/*.js")
    .pipe(concat("all.js"))----务必把不要插件合并
    .pipe(uglify())
    .pipe(gulp.dest("./release/js"))
});

压缩html文件

gulp.task("html",function(){

// gulp.src(["./*.html","./view/*.html"],{base:"./"})
---如果其它html页面在其他位置，加个base参数，就可以参考前面的路径

gulp.src("./*.html")

        .pipe(htmlmin({collapseWhitespace: true,--去掉空格
        removeComments:true,---去掉注释
        minifyJS:true,---html文档中嵌入的js压缩
        minifyCSS:true}))---html文档中嵌入的css压缩

        .pipe(gulp.dest("./release"))
});

添加版本号gulp-rev

采用md5加密方式来解决缓存问题

    如果文件修改，加密串就会改变，浏览器来重新下载文件

    如果文件未修改，加密号不变，浏览器就会从缓存中直接加载

替换css和js的版本号文件gulp-rev-collector

gulp.task("less",function(){
    gulp.src("./css/*.less")
        .pipe(less())
        .pipe(autorefixer())
        .pipe(cssmin())
        .pipe(rev())
        .pipe(gulp.dest("./release/css"))
        .pipe(rev.manifest())
        .pipe(gulp.dest("./release/rev"))
});

//替换html文件中引用的css文件

gulp.task("rev",function(){

// gulp.src(["./release/rev/*.json","./release/**/*.html"]
,{base:"./release"});

gulp.src(["./release/rev/*.json","./release/*.html"])
    .pipe(revCollector())
    .pipe(gulp.dest("./release"));
});

合并js文件gulp-useref

    html文件中需要合并的js文件前后加上
    <!--build:js ./demo.min.js-->
    <!--endbuild-->

gulp.task("useref",function(){
gulp.src("./index.html")
    .pipe(useref())
    .pipe(gulpif("*.js",uglify()))----实现压缩操作
    .pipe(gulp.dest("./release"))
});

合并后的html中的路径也替换了。

<--build:remove-->
<--endbuild-->

可以删除不想要的js文件

完整的构建流程

var gulp = require('gulp'),

less = require('gulp-less'),

cssmin = require('gulp-cssmin'),

autoprefixer = require('gulp-autoprefixer'),

rev = require('gulp-rev'),

imagemin = require('gulp-imagemin'),

useref = require('gulp-useref'),

gulpif = require('gulp-if'),

uglify = require('gulp-uglify'),

rename = require('gulp-rename'),

revCollector = require('gulp-rev-collector');

// gulp 对象，提供了若干方法

// 处理css

gulp.task('css', function () {

return gulp.src('./public/less/main.less')
    .pipe(less())
    .pipe(cssmin())
    .pipe(autoprefixer())
    .pipe(rev())
    .pipe(gulp.dest('./release/public/css'))
    .pipe(rev.manifest())
    .pipe(rename('css-manifest.json'))
    .pipe(gulp.dest('./release/rev'));

});

// 处理图片

gulp.task('image', function () {

return gulp.src(['./public/images/**/*', './uploads/*'], {base: './'})
    .pipe(imagemin())
    .pipe(rev())
    .pipe(gulp.dest('./release'))
    .pipe(rev.manifest())
    .pipe(rename('image-manifest.json'))
    .pipe(gulp.dest('./release/rev'));

});

// 处理js

gulp.task('useref', function () {

return gulp.src('./index.html')
    .pipe(useref())
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.js', rev()))
    .pipe(gulp.dest('./release'))
    .pipe(rev.manifest())
    .pipe(rename('js-manifest.json'))
    .pipe(gulp.dest('./release/rev'));

});

// 其它

gulp.task('other', function () {

return gulp.src(['./api/*', './public/fonts/*',
'./public/libs/*', './views/*.html'], {base: './'})
    .pipe(gulp.dest('./release'));

});

// 替换

gulp.task('rev', ['css', 'image', 'useref'], function () {

gulp.src(['./release/rev/*.json', './release/index.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('./release'));

});

gulp.task('default', ['rev', 'other']);

// gulp.task('default', function () {
//     console.log('默认');
// })

// gulp.task('demo', ['css', 'image'], function () {
//     console.log(11);
// });