Gulp

Gulp

gulp常用插件列表

• gulp-uglify　　//使用uglify()函数，压缩代码，只能压缩js
• gulp-concat　　//使用concat()函数，合并代码
• gulp-autoprefixer　　//使用autoprefixer()，自动为css3属性添加浏览器私有前缀
• gulp-csso　　　　//压缩css代码
• gulp-html-minify　　　　//压缩html文件，去掉html文件的换行空格等
• gulp-html-replace　　　　//用来替换html中的构建块
• gulp-base64　　　　//将小图片转换为base64码
• gulp-less　　　　//编译less为css

gulp的初步了解

gulp是一个自动化构建工具，在项目开发阶段或部署阶段执行一些自动化任务。

gulp可以帮我们将书写的代码比那位真正可在生产环境中部署的代码，是实现自动化工作流的主要工具。

gulp的优点

• 流式构建系统
• 插件众多
• 使用JavaScript配置
• 底层的计算非常快
• 可以并行执行任务
• 可以创造完整的构建体系

gulp相对于grunt的优势

gulp跟grunt一样支持跨平台，即支持跨平台不是gulp独有的优势，不同在于grunt需要Gruntfile.js，gulp需要Gulpfile.js，最核心的不同之处在于，gulp是以流为核心的，而grunt是以配置加上文件io为核心的。

gulp的安装

• 先安装nodejs环境，npm包管理系统就可以使用了
• 运行命令npm install -g gulp-cli在npm上下载，并全局安装gulp，让gulp成为命令行接口，就可在命令行中直接使用gulp命令
• 运行命令npm init创建pakeage.json文件，相当于“身份证文件”
• 运行命令npm install --save gulp，将gulp进行本地安装，全局和本地都安装了，才能使用。

注意，因为是国外资源，安装时可使用cnpm淘宝镜像来安装。

gulpfile配置文件

• gulpfile.js文件指导gulp工作
• gulpfile文件中定义多个task，通常向外使用exports关键字
• 这些task可以被gulp 任务名命令运行，默认的task叫做default，它可以被gulp命令运行

以下是gulpfile.js示例：

// 定义一个个task，task就是普通的函数
function task1() {
    console.log('我是task1！');
    return;// 必须有return，否则gulp会认为任务没有执行完毕
}
function task2() {
    console.log('我是task2！');
    return;// 必须有return，否则gulp会认为任务没有执行完毕
}
function task3() {
    console.log('我是task3！');
    return;// 必须有return，否则gulp会认为任务没有执行完毕
}

// 向外暴露
exports.t1 = task1;
exports.task2 = task2;
exports.t3 = task3;

// 外部使用就是gulp t1
// gulp task2

// 默认暴露
exports.default = task3;// 直接在命令行gulp直接运行

流的使用

• 流是从一个源（source）流向一个终点（destination）的数据的序列
• gulp中，src()函数创建可读流，dest()函数创建可写流。这两个函数组成基本的task
• 流创建成功后，需要使用管道pipe()函数将流导入特定的处理方法。dest()函数也是其中的方法之一。

 以下是使用流的gulpfile.js的代码示例：

// 引入gulp文件，require表示引入，解构出三个函数
const {src, dest, pipe} = require("gulp");

// 定义task
function task1() {
    // src表示设置流的源头
    return src("./foo/**/*.txt") // 这里的一个*代表任意名字，**代表任意目录，也就是所有目录，所有文件
        // pipe表示管道，pipe()里面写函数
        // dest表示设置流的终点
        .pipe(dest("./bar"));
}

// 暴露
exports.default = task1;

gulp插件基本使用

• 每个gulp插件都是一个函数，要将它放入pipe()函数中
• pipe()管道可以链式调用（连续打点使用）

gulp使用各种插件的示例：

// 引入gulp文件，require表示引入，解构出三个函数
const {src, pipe, dest, parallel} = require('gulp');
// 引入插件
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const csso = require('gulp-csso');
const htmlMinify = require('gulp-html-minify');
const htmlReplace = require('gulp-html-replace');
const base64 = require('gulp-base64');

function js() {
    return src('./app/js/**/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(dest('./dest/js'));
}

function css() {
    return src('./app/css/**/*.css')
        .pipe(base64({
            extentions: ['png'],
            maxImageSize: 500*1024 // bytes 转换图片的最大尺寸
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 version', '> 5%', 'firefox > 10', 'ie 6-8']
        }))
        .pipe(csso())
        .pipe(concat('all.min.css'))
        .pipe(dest('./dest/css'));
}

function html() {
    return src('./app/index.html')
        .pipe(htmlReplace({
            css: './css/all.min.css', // 需要在html文件中的link标签开头添加<!-- bulid:css -->和结尾添加<!-- endbuild -->
            js: './js/all.min.js'    //js和css同理，改为bulid：js
        }))
        .pipe(htmlMinify())
        .pipe(dest('./dest'));
}


// 暴露
exports.default = parallel(js, css, html);

平行运行多个task

• parallel函数用来平行运行多个task
• 平行运行的task没有先后之分，谁先谁后没有关系

使用watch()函数实时监控文件变化