常用的gulp操作集成
发布于 4 个月前 作者 wujohns 464 次浏览 来自 分享

gulp-2b

一些常用的gulp操作汇总,针对非es6的前端工程。 项目地址: github npm包地址:gulp-2b

安装

npm install gulp-2b

接口使用介绍

gulp-2b 主要提供了三个函数:
concatJs - 用于将多个 js 文件的合并为一个 js(可配置压缩、suorcemap、自动编译)
singleJs - 用于操作单个 js 文件(可配置压缩、suorcemap、自动编译)
singleLess - 用于操作单个 less 文件(可配置压缩、suorcemap、插件、自动编译)

案例讲解

concatJs

现有目录结构如下:

project
+--src
    +--project1
        +-- p1_1.js
        +-- p1_2.js
        ...
    +--project2
        +-- p2_1.js
        +-- p2_2.js
        ...
    +--ex.js
+--dest

现在想将 src/project1 目录中的 所有的js文件 打包合并到 dest/p1.js, 将 src/project2 目录中的 所有的js文件 打包合并到 dest/p2.js,那么做法如下:

const gulp2b = require('gulp-2b');
gulp2b.concatJs({
    modules: [
        // 如果只取一层目录则 src: ['src/project1/*.js']
        { src: ['src/project1/**/*.js'], dest: 'dest/p1.js' },
        { src: ['src/project2/**/*.js'], dest: 'dest/p2.js' },
    ],
    uglify: false,      // 是否压缩,默认为 false
    sourcemap: false,   // 是否生成sourcemap,默认为 false
    watch: false        // 是否启用监听,默认为 false(启用监听后当文件内容变动时,自动重新打包)
}, (err) => {
    // 任务完成后的操作,可自定义
});

如果想将 src/project1 目录中的 所有的js文件 以及 src/ex.js 压缩打包合并到 dest/p1.min.js

const gulp2b = require('gulp-2b');
gulp2b.concatJs([
    modules: [
        { src: ['src/project1/**/*.js', 'src/ex.js'], dest: 'dest/p1.min.js' }
    ],
    uglify: true
], (err) => {
    // 任务完成后的操作,可自定义
});

singleJs

还是之前的目录结构:

project
+--src
    +--project1
        +-- p1_1.js
        +-- p1_2.js
        ...
    +--project2
        +-- p2_1.js
        +-- p2_2.js
        ...
    +--ex.js
+--dest

现在想将 src/project1 目录中的 所有的js文件 进行压缩并移动到 dest/project1 目录中, 将 src/project2 目录中的 所有的js文件 进行压缩并移动到 dest/project2 目录中。实现如下:

const gulp2b = require('gulp-2b');
gulp2b.singleJs({
    groups: [
        { src: ['src/project1/**/*.js'], dest: 'dest/project1' },
        { src: ['src/project2/**/*.js'], dest: 'dest/project2' },
    ],
    uglify: true
}, (err) => {
    // 任务完成后的操作,可自定义
});

执行后 dest 目录下文件结构:

+--dest
    +--project1
        +-- p1_1.js
        +-- p1_2.js
        ...
    +--project2
        +-- p2_1.js
        +-- p2_2.js
        ...

需要注意的是移动的时候无法保持原有的目录结构,例如原先的 src/project1/xx/aa.js 在上述 操作中,就移动到了 dest/project1/aa.js

singleLess

与 singleJs 操作类似,主要用于 less 的编译。现有目录结构如下:

project
+--src
    +--header
        +-- h1.less
        +-- p2.less
        ...
    +--footer
        +-- h1.less
        +-- h2.less
        ...
+--dest

src/headersrc/footer 中的 less 文件编译到 dest/headerdest/footer 目录中。实现如下:

const gulp2b = require('gulp-2b');
gulp2b.singleLess({
    groups: [
        { src: ['src/project1/**/*.less'], dest: 'dest/project1' },
        { src: ['src/project2/*.less'], dest: 'dest/project2' },
    ],
    uglify: true,
    watch: false,
    sourcemap: false,
    plugins: [],    // 非必要参数,可添加自定义less插件
    globalVars: { key: '"value"' }  // 向less编译过程中注入的全局变量
}, (err) => {
    // 任务完成后的操作,可自定义
});

执行后 dest 目录下文件结构:

+--dest
    +--header
        +-- h1.less
        +-- p2.less
        ...
    +--footer
        +-- h1.less
        +-- h2.less
        ...

关于contactLess

由于 less 自带相应的 import 机制,所以推荐使用 less 的该机制进行组装,而不是交给gulp,所以这里 没有去实现这一部分。

相关案例

参考项目的 examples 目录下的案例即可

回到顶部