当前版本V1.3.3，向下兼容。旧版传送V0.6.0

• 默认零配置，也可以根据实际项目需要自定制配置
• 操作简单，对新手友好
• 扩展性更强
• 支持js模块化开发
• 内置精灵合图功能
• 内置可在本地开启小型静态资源服务器功能
• 内置许多scss工具方法，比如px转rem的rem-calc()方法；响应式css的解决方案；通用reset配置

Long, long ago... Gulp都是一堆依赖包只针对一个项目，很（kao）难（bei）一个gulp配置文件用在多个项目。本项目就是为了解决这个痛点而被创造出来的。其中融入了作者大量的心血（Holidays），也是进阶gulp使用不错的案例。内置了一些好用的task和两组组合task。其中，精灵合图功能过于强大，为此还单独抽离了一个库gulp-sprites...

git clone https://github.com/121595113/gulp-T.git

cd gulp-T
npm install

在src/目录下创建项目（已内置app、pc和webpack-demo三个项目，可以直接修改使用）

以app项目为例

# 开发模式
gulp app --app

# 生产模式
gulp app:build --app

运行方式gulp+任务名(app)+--项目名(app)

首先在项目目录gulp-T/src/app/添加gulpfile.babel.js,添加以下代码

'use strict';
import fs from 'fs';
import path from 'path';
import requireDir from 'require-dir';

let taskPath = '';
for (const item of module.paths) {
    if (fs.existsSync(item)){
        taskPath = path.resolve(item, '../gulp/tasks');
        break;
    }
}

// Require all tasks in gulp/tasks, including subfolders
requireDir(taskPath, { recurse: true });

然后，命令行

# cd gulp-T/src/app/

# 开发模式
gulp app

# 生产模式
gulp app:build

运行方式gulp+任务名(app)

• 子任务

  • browsersync

    启一个本地服务并打开指定浏览器（可用来预览项目）

  • compass[:build]

    使用compass编译scss

  • copy

    用于拷贝src下的文件到dest指定目录下

  • delete

    删除之前打包好的项目文件

  • dev-server

    启一个本地服务并打开指定浏览器，然后监听本地文件变化并同步刷新浏览器

  • html

    将src下的.html文件拷贝到dest指定的目录下

  • imagemin

    用于压缩图片

  • pug

    处理.pug相关的文件。pug原名jade，是html预处理文件

  • sass[:build]

    将scss编译成css

  • scripts[:build]

    编译、压缩.js文件，支持es6语法

  • scripts2[:build]

    采用webpack编译、压缩.js文件，支持es6语法，支持js的模块化开发。需要注意的是模块文件命名请用_下划线开头

  • sprites

    精灵合图，也叫雪碧图。将零散的图片合成到一张图片上，以减少资源请求数

  • watch

    监听文件变化，执行相应的任务（用于开发时不需要刷新浏览器的任务）

  • zip

    将打包后的文件压缩成.zip文件，方便文件的传输

• 组合任务

  • app[:build]

    执行一组任务，app分别执行了delete, imagemin, pug, sass, scripts, dev-server；app:build分别执行了delete, imagemin, pug, sass:build, scripts:build

  • pc[:build]

    执行一组任务，pc分别执行了delete, imagemin, html, sass, scripts, dev-server；pc:build分别执行了delete, imagemin, html, sass:build, scripts:build

  • webpack[:build]

    执行一组任务，webpack分别执行了delete, imagemin, html, sass, scripts2, dev-server；webpack:build分别执行了delete, imagemin, html, sass:build, scripts2:build

以上任务带[:build]表示开发和生产模式两种任务，如compass[:build]表示有compass和compass:build两种任务

详细配置参见gulp-T/gulp/config.default.js

browsersync任务配置

• notify ：Boolean类型，表是否在浏览器中显示通知，默认false
• port ：String类型，监听端口
• server
  • baseDir：String[]类型, 静态资源根目录
  • index：String类型，浏览器默认打开文件名
  • routes：Object类型，默认{}
• middleware：proxy[]类型，设置代理
• browser：String[]类型，打开浏览器列表
• open：String类型，项目在浏览器打开方式。可选值local, external, ui, ui-external, tunnel or false

comapss任务配置

• development
  • src：glob类型路径，scss源码在系统中的路径
  • dest：编译后文件系统路径
  • options
    • import_path
    • sass
    • css
    • image
    • sourcemap：Boolean类型，是否生成调试文件.map，默认true
  • autoprefixer
    • browsers：Array类型，为css满足条件的浏览器厂商前缀
    • cascade
• production
  • src：glob类型路径，scss源码在系统中的路径
  • dest：编译后文件系统路径
  • options
    • import_path
    • sass
    • css
    • image
  • autoprefixer
    • browsers
    • cascade

copy任务配置

• key,名字随便取，主要便于识别，利于后期维护
  • src：glob类型路径，要拷贝文件在系统中的路径
  • dest：拷贝到的系统路径

对象序列，如

pic: {
  src: `${src}/pic/**/*`,
  dest: `${dest}/pic/`
}

delete任务配置

• src：glob[]类型路径，要删除的文件

html任务配置

• src源目录
• dest目标目录

imagemin任务配置

• key,名字随便取
  • src
  • dest

对象序列，如

images: {
  src: `${src}/pic/**/*`,
  dest: `${dest}/pic/`
},
ico: {
  src: `${src}/*.{ico,png}`,
  dest: `${dest}/`
}

pug任务配置

• src源目录
• dest目标目录
• data数据目录

sass任务配置

• src源目录
• dest目标目录
• options
  • includePathsString[]类型,配置可以省略路径的文件
  • outputStyle压缩方式，可选nested、 expanded、 compact、 compressed
• autoprefixer同compass
• base64：Boolean类型，是否将满足条件的图片转成base64。默认true

scripts任务配置

• src源目录
• dest目标目录

scripts2任务配置,内部采用webpack编译js

• src源目录
• dest目标目录
• options Object类型，webpack配置对象。可配置以下两个属性
  • devtool String类型
  • module Object类型，可配置以下属性
    • rules Object[]类型，各种leader对象组成的数组

sprites任务配置

• src源目录
• dest目标目录

zip任务配置

• src源目录
• filename打压缩包后的名字
• dest目标目录

要监听文件列表和要监听的任务

• change：glob[],要监听文件数组列表
• tasks：String[],要监听的任务数组。默认值['sass', 'pug', 'html', 'imagemin', 'scripts']

在单独项目里的gulpfile.babel.js内添加下面注释部分的代码，并恢复注释（使用者新制定的项目内需先创建上述js文件）

'use strict';
import fs from 'fs';
import path from 'path';
import requireDir from 'require-dir';
// import gulp from 'gulp';
// import gulpSequence from 'gulp-sequence';

let taskPath = '';
for (const item of module.paths) {
    if (fs.existsSync(item)) {
        taskPath = path.resolve(item, '../gulp/tasks');
        break;
    }
}

requireDir(taskPath, { recurse: true });

然后，开始组合自己的任务，添加如下代码

// 开发组合任务
gulp.task('newTask', (callback) => {
  gulpSequence(
    'delete',
    'imagemin', [
      'html',
      'sass',
      'scripts'
    ],
    'dev-server'
  )(callback);
});

// 生产组合任务
gulp.task('newTask:build', gulpSequence(
  'delete',
  'imagemin', [
    'html',
    'sass:build',
    'scripts:build'
  ],
  'zip'
));

此时就可以在项目目录下运行下面的命令了

# 开发模式
gulp newTask

# 生产模式
gulp newTask:build

在项目下创建config.gulp.js,添加如下通用代码

import path from 'path';

const rootOfGulp = process.argv.rootOfGulp;
const src = path.resolve(__dirname);
const projectName = path.relative(rootOfGulp, src).replace(/src(\/|\\)/,'');
const dest = path.resolve(rootOfGulp, `./build/${projectName}`);
Object.assign(process.argv, {dest});

module.exports = {
  // 配置项写在这里
};

以browsersync为例，开发中，不同的项目对应不同的端口是很正常的需求；与后端联调中，接口代理也是刚需，修改代码如下

// 因为代理依赖第三方模块，所以添加如下代码
const proxy = require('http-proxy-middleware');
// 设置代理
const middleware = [
  proxy('/接口片段', {
    target: 'http://localhost:8080',
    changeOrigin: true
  }),
  proxy(['/接口片段1', '/接口片段2'], {
    target: 'http://localhost:8080',
    changeOrigin: true
  })
];

module.exports = {
  browsersync: {
    port: 8000,
    middleware: [...middleware],
    open: 'external' // local, external, ui, ui-external, tunnel or false
  },
};

再举一列，copy任务也是比较常见的需求，设置如下：

module.exports = {
  // ...其他配置

  // 拷贝项目下pic文件拷贝到打包文件下pic
  copy: {
    pic: {
      src: `${src}/pic/**/*`,
      dest: `${dest}/pic/`
    }
  },
};

gulp sprites -s 文件夹名1,文件夹名2,文件夹名3,文件夹名4 --app

同时合图支持自定义layout，在命令行添加参数-L，空格后跟上要合成的方式，如：

gulp sprites -s 文件夹名 -L top-down --app

可选参数见下表（来源gulp.spritesmith官网）,默认binary-tree

top-down	left-right	diagonal	alt-diagonal	binary-tree

关于合图后的图片引用参考sass中如何使用合图？

由于合图任务不是高频操作的任务，所以不建议将sprites子任务在组合任务中出现。执行合图任务后会在当前项目'sass/sprites/'文件夹下生成对应的配置文件。配置文件使用方法如下：

// 1、首先引入调用所需的内置@mixin
@import "mobile-mixin";

// 2、然后引入合图生成的配置文件，这里以'cur'为例
@import "./sprites/cur";

// 3.1单个图片的引用
div{
  @include sprite($cur-lv2); // 参数为$文件夹名-文件名
}

// 3.2一次性引入全部
@include sprites($cur-sprites); // 参数为$文件夹名-sprites

// 3.2.1你可以自定义输出样式前缀，参数为$pre-name
@include sprites($cur-sprites,$pre-name:'icon');

// 3.2.2你也可以自定义输出样式连字符，参数为$separator
@include sprites($cur-sprites,$separator:'__');

// 3.2.3高清屏@2x图片的使用，参数为$retina
@include sprites($cur-sprites,$retina:true);

// 3.2.4扩展css，添加一个而外的class并将图片的引用放在这个class上，参数为$expand
@include sprites($cur-sprites,$expand:true);

// 3.2.4生成结果
.cur_sprites {
  background-image: url(../images/cur-sprite.png?1484875398201);
  background-repeat: no-repeat;
}

.cur_lv2 {
  background-position: 0px 0px;
  width: 76px;
  height: 88px;
}

.cur_lv3 {
  background-position: -80px 0px;
  width: 76px;
  height: 88px;
}

同时精灵合图支持rem方式的调用，只要在方法前添加rem-前缀,内部调用了rem-calc()方法

div{
  @include rem-sprite($cur-lv2); // 参数为$文件夹名-文件名
}
@include rem-sprites($cur-sprites);

rem计算基数可以自定义，默认是全局的$rem-base

div{
  @include rem-sprite($cur-lv2,$rem-base:720); // 带rem计算基数的,720是设计稿的尺寸
}
@include rem-sprites($cur-sprites,$rem-base:720); // 带rem计算基数的,720是设计稿的尺寸

rem的转换时通过@function rem-calc()转换的,如下:

div{
    width: rem-calc(100px);
    height: rem-calc(100); // px单位可以省略,建议一直省略
}

// 支持多个参数
div{
    margin: rem-calc(10 20 auto 40);
}

支持自定义计算基数，以320为分隔点，'< 320'根据字体大小计算，'>= 320'根据设计稿宽度计算

div{
    width: rem-calc(100px,720); // 这里是根据设计稿720计算的
    margin: rem-calc(10 20 auto 40,32); // 这里是根据字体大小32计算的
}

还可以设置全局rem计算基数和计算比值,如：

$rem-base: 750; // 可设置为设计稿宽度或字体大小(见下文)
$Response_rate: 100 / 750; // 可理解为：在750设计稿上， 100px = 1rem

默认值：

$rem-base: 16px !default; // 默认值16px，以字体大小设置
$Response_rate: 12 / 320 !default; // 可理解为：在320的设计稿上，12px = 1rem

适配的实现有好多种。有通过js控制的（手淘方案），有通过css控制的，这里采用后者。使用方式如下

$Response:true; // 设为true即为开启了响应式

默认适配手机尺寸列表：320 360 375 400 480 540 640 720,你也可以自定义适配的手机尺寸

$Response:true;
$mediaArrays:(320 375 480 640 720); // 自定义适配手机尺寸

答：在子项目中执行gulp browsersync，或者在根项目中执行gulp browsersync --<子项目名>。

答：在子项目中执行gulp watch，或者在项目中执行gulp watch --<子项目名>

答：在子项目中执行gulp dev-server，或者在项目中执行gulp dev-server --<子项目名>

答：为了模块（代码片段）复用；只要把监听任务数组中的scripts换成scripts2就可以了