gulp项目构建

项目构建

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

1.1 Gulp

• Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，以其简洁的配置和卓越的性能成为目前主流的构建工具。

• 全局安装 npm install -g gulp

• 基于Nodejs的工具有很多：

• 例如bower、gulp、grunt、fis、webpack，首先一个前提就是安装Nodejs环境（安装Nodejs时避免出现中文目录）;

• 通过node -v验证环境、通过npm -v验证包管理器；

• 安装基于Nodejs的工具，可以通过Nodejs包管理器（npm）来完成；

• npm install （包）工具名称：就会安装在执行安装命令的目录下；node_modules，称之为本地安装；

• npm install -g （包）工具名称：就会安装在一个特殊目录，称之为全局安装；

• 举例：

npm install grunt
npm intasll -g gulp
npm install -g fis3

1.1.1 Gulp基础

• 1、本地安装gulp

• 进入项目根目录执行npm install gulp --save-dev（添加--save-dev会在package.json记录依赖关系）。

• 2、任务清单

• 在项目根目录中创建gulpfile.js（这是一个配置文件）

//引入本地安装的gulp
var gulp = require('gulp');
//返回值gulp是一个对象，借助此对象可以实现任务清单的定制
//通过一系列的方法来实现

//task(任务名,任务作用)用来定义任务
gulp.task('default',function(){
    console.log('执行gulp');
    //借助gulp.src来指定less文件的位置
    gulp.src('../public/less/*.less');
})

• 在终端执行gulp default，就会打印：执行gulp。

• 3、定义任务

• 在gulpfile.js定义构建任务，如压缩、合并，Gulp自身并不执行任何任务，是通过调用具体插件来完成的。

• 以编译LESS为例，安装npm install gulp-less，定义任务：

var gulp = require('gulp');
//返回的一个值less是一个函数
var less = require('gulp-less');

//定义任务，将less转成css
gulp.task('less',function(){
    gulp.src('./public/less/*.less')
        //借助gulp插件实现less转css的操作
        .pipe(less())
        //通过gulp.dest进行存储
        .pipe(gulp.dest('./release/public'))
});

• 4、执行任务

• 输入命令 gulp less

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

1.1.2 Gulp工作原理

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

1.1.3 Gulp API

• Gulp是基于NodeJS的，通过require可以引入一个NodeJS的包（模块），其作用类似于浏览器中的script标签引入资源，被引入的包存放在node_modules目录下。

• 引入gulp包（模块）后返回一个对象，习惯赋值给变量gulp，通过该对象提供的方法（API）完成任务的配置。

• 1、gulp.task() 定义各种不同的任务，有两个参数：

//less是任务名称，在回调函数里定义任务
gulp.task('less',function(){
    //定义任务
});

• 不同任务间存在依赖关系时，可以指定依赖，如下代码所示：

//通过数组指定有依赖关系的任务
gulp.task('less',['依赖1','依赖2','依赖3'],function(){
    //定义任务
});

• 2、gulp.src() 需要构建资源的路径，字符串或数组（可以正则方式书写）

gulp.task('less',function(){
    //需要编译的less
    gulp.src('./public/less/**/*.js')
});

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

gulp.task('less',function(){
    //需要编译的less
    gulp.src('./public/less/**/*.js')
        //将src获取的资源传递给less插件
        .pipe(less())
});

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

gulp.task('less',function(){
    //需要编译的less
    gulp.src('./public/less/**/*.js')
        //将src获取的资源传递给less插件
        .pipe(less())
        //将less插件编译好的文件存储
        .pipe(gulp.dest('./public/css'));
});

• 5、gulp.watch()

1.1.4 常用Gulp插件

插件	含义
gulp-less	编译LESS文件；
gulp-cssmin	压缩CSS；
gulp-imagemin	图片压缩；
gulp-uglify	压缩Javascript；
gulp-concat	文件合并；
gulp-htmlmin	压缩HTML；
gulp-autoprefixer	添加CSS私有前缀；
gulp-rev	添加版本号；（给文件生成一个加密串，取加密串的一部分用于重新给文件命名）
gulp-rev-collector	内容替换；
gulp-useref	合并文件（可以给文件重新命名），并且合并之后会自动更改其它地方相关的路径
gulp-if	判断条件
gulp-rname	重命名；
gulp-copy	文件拷贝；
gulp-replace	文本替换；

• gulp-minify-html 被抛弃，取代它的是 gulp-htmlmin，两者的区别是：

  • gulp-minify-html 对它设置参数不会起作用，它默认会压缩、去空格、去注释、压缩js、压缩css等，而且会忽略语法错误；
  • gulp-htmlmin ，官方建议使用，并取代 gulp-minify-html，可以根据需要对它进行参数设置，但是它不会忽略语法错误。

• 使用：

//引入本地安装的gulp
//返回值gulp是一个对象，借助此对象可以实现任务清单的定制
var gulp = require('gulp');

//返回的一个值less是一个函数
var less = require('gulp-less');

//压缩css文件
var cssmin = require('gulp-cssmin');

//图片压缩
var imagemin = require('gulp-imagemin');

//通过一系列的方法来实现
//task(任务名,任务作用)用来定义任务
gulp.task('default',function(){
    //借助gulp.src来指定less文件的位置
    gulp.src('../public/less/*.less')
        //借助于gulp插件实现less转css的操作
        .pipe(less())
        .pipe(cssmin())
        //通过gulp.dest进行存储
        .pipe(gulp.dest('./path/xxx'));
});

//处理图片（压缩图片）
gulp.task('imageMin',function(){
    gulp.src('./images/*')    //图片位置，只压缩当前文件夹下的图片，如果需要压缩该文件夹下面的文件夹里面的图片，需要使用两个*：./path/**/*
        .pipe(imagemin())
        .pipe(gulp.dest('./release/public/images'))
});

var uglify = require('gulp-uglify');
var concat = require('gulp-concat);
//压缩js
gulp.task('js',function(){
    gulp.src('./scripts/*.js')
        //合并所有js文件
        .pipe(concat('all.js'))
        //压缩js文件
        .pipe(uglify())
        .pipe(gulp.dest('./release/public/scripts'))
});

//1.压缩html
var html = require('gulp-htmlmin');
gulp.task('htmlmin',function(){
    //如果有多个目录，用数组进行传递
    gulp.src(['./index.html','./views/*.html'])
        .pipe(html({collapseWhitespace:true}))   //遇到问题时就查文档npm
        .pipe(gulp.dest(''));
});

//2.压缩html（实现文件转移，例如以“./”为基准）
var html = require('gulp-htmlmin');
gulp.task('htmlmin',function(){
    //如果有多个目录，用数组进行传递
    gulp.src(['./index.html','./views/*.html'],{base:'./'})
        .pipe(html({collapseWhitespace:true}))   //遇到问题时就查文档npm
        .pipe(gulp.dest(''));
});

• 替换：

var rev = require('gulp-rev');
gulp.task('less',function(){
    gulp.src('./public/less/*.less')
        //less转css
        .pipe(less())
        .pipe(cssmin())
        .pipe(rev())
        //通过gulp.dest进行存储
        .pipe(gulp.dest('./release/public'))
        //通过manifest会列出对应内容替换前和替换后样子
        .pipe(rev.manifest())
        .pipe(gulp.dest('./release/rev'))   //保存的为JSON文件
});

//替换操作
var revCollector = require('gulp-rev-collector');
gulp.task('rev',function(){
    gulp.src(['./release/rev/*.json','./release/**/*.html'],{base:'./release'})
        .pipe(revCollector())
        .pipe(gulp.dest('./release'))
});

• 执行任务时，报错，定位错误方式如下：

var gutil = require('gulp-util')

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

    return gulp.src('src/*.js')
        .pipe(uglify().on('error', function(err){
            gutil.log(err);
            this.emit('end');
        }))
        .pipe(gulp.dest('dist'));
})