使用gulp

gulp项目构建

多个开发者共同开发一个项目，每位开发者负责不一样的模块，这就会形成一个完整的项目其实是由许多的“代码版段”组成的；
使用less、sass等一些预处理程序，下降CSS的维护成本，最终须要将这些预处理程序进行解析；
合并css、javascript，压缩html、css、javascript、images能够加速网页打开速度，提高性能；
这一系列的任务彻底靠手动完成几乎是不可能的，借助构建工具能够轻松实现。
所谓构建工具是指经过简单配置就能够帮咱们实现合并、压缩、校验、预处理等一系列任务的软件工具。
常见的构建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack

Gulp

Gulp是基于Nodejs开发的一个构建工具，借助gulp插件能够实现不一样的构建任务，以其简洁的配置和卓越的性能成为目前主流的构建工具。
全局安装 npm install -g gulp

Gulp基础

一、本地安装gulp
进入项目根目录执行npm install gulp --save-dev（添加--save-dev会在package.json记录依赖关系）。
二、任务清单
在项目根目录中建立gulpfile.js（这是一个配置文件）

var gulp = require('gulp');
gulp.task('default',function(){
    //定义任务
})

三、定义任务
在gulpfile.js定义构建任务，如压缩、合并，Gulp自身并不执行任何任务，是经过调用具体插件来完成的。
以编译LESS为例，安装npm install gulp-less，以下图定义任务

var gulp = require('gulp'),
    less = require('gulp-less');
gulp.task('less',function(){
    return gulp,src('./public.less/*.less')
        .pipe(less())
        .pipe(gulp.desk('./public/css'));
});

四、执行任务
输入命令 gulp less

gulp less

这样咱们的LESS文件便会编译成CSS了。

Gulp工做原理

经过不一样的插件实现构建任务，Gulp只是按着配置文件调用执行了这些插件。

Gulp API

Gulp是基于NodeJS的，经过require能够引入一个NodeJS的包（模块），其做用相似于浏览器中的script标签引入资源，被引入的包存放在node_modules目录下。
引入gulp包（模块）后返回一个对象，习惯赋值给变量gulp，经过该对象提供的方法（API）完成任务的配置。
一、gulp.task() 定义各类不一样的任务，以下图有两个参数

gulp.task('less',function(){
    //定义人物
})

不一样任务间存在依赖关系时，能够指定依赖，以下

gulp.task('less',['依赖一'],['依赖二'],['依赖三'],function(){
    
})

二、gulp.src() 须要构建资源的路径，字符串或数组（能够正则方式书写）

gulp.task('less',function(){
    gulp.src('./public/less/**/*.js')
});

二、gulp.pipe() 管道，将须要构建的资源“输送”给插件。

gulp.task('less',function(){
    gulp.src('./public/less/**/*.js')
        .pipe(less())
});

三、gulp.dest() 构建任务完成后资源存放的路径（会自动建立）

gulp.task('less',function(){
    gulp.src('./public/less/**/*.js')
        .pipe(less())
        .pipe(gulp.desk('./public/css'));
});

四、gulp.watch()

经常使用Gulp插件(官网还有更多)

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 条件判断

完整的一个项目构建

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: './'})//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'));

});
//return用来解决依赖关系的执行时间问题
gulp.task('default', ['rev', 'other']);

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

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