gulp

当我们开始一个新的 JavaScript 项目时，我们需要考虑的第一件事就是搭建一个前端编译环境。但是在面对众多的 JavaScript 构建工具时，我们却无所适从，不知道究竟哪一个才是最适合我们的。 想象一下，如果有一个很简单的判断标准，让你知道如何针对不同的项目，选取不同的前端构建工具，那是不是很美好呢？事实上，在使用自动构建系统，积累了5年的项目开发经验之后，我总结出来如下内容。相信我，它是可以让你明白不同构建工具的使用场景的。 开门见山 判断你的项目需要使用哪种构建工具是很容易的： 如果是小项目的话，基于 ES6 编译器即可 如果是单页应用的话，还需要一个模块打包器 如果你的项目，部署在了生产环境之中，除了上述之外，还需要一个能够自动执行的任务运行器 下面是我推荐的一些可以满足你上述需求的前端构建工具： 使用 Babel 可以编译适配 ES6 代码 使用 Webpack 能够打包 JavaScript 文件以及其相关的依赖 使用 Gulp 能够自动化地将文件批量重命名，从而刷新静态资源文件的缓存 那么，问题来了，前端构建工具那么多，为什么我偏偏推荐上述的这些呢？ 追根溯源 我对很多流行的 JavaScript 构建工具进行了分析，并分别找出了它们的优点与缺点。既然编译器是无论如何都需要的，那么我们就从编译器开始说起吧。 编译器 ES5 版的 JavaScript

更多gulp常用插件使用请访问： gulp常用插件汇总 chai 这是一款用于节点和浏览器的BDD / TDD断言库，可以与任何javascript测试框架完美地配对。 更多使用文档请点击访问chai工具官网 。 安装 一键安装不多解释 npm install --save-dev chai 使用 浏览器 您也可以在浏览器中使用它。通过npm安装并使用chai.js下载中找到的文件。例如： <script src="./node_modules/chai/chai.js"></script> 导入库中的代码，然后挑选的款式之一，你想使用-要么 assert ， expect 或 should ： var chai = require('chai'); var assert = chai.assert; // 使用断言样式 var expect = chai.expect; // 使用Expect样式 var should = chai.should(); // 使用Should样式 本机模块用法（在全球注册chai测试样式） require('chai/register-assert'); // 使用断言样式 require('chai/register-expect'); // 使用Expect样式 require('chai/register-should'); //

更多gulp常用插件使用请访问： gulp常用插件汇总 gulp-notify 这是一款gulp通知插件。 更多使用文档请点击访问gulp-notify工具官网 。 安装 一键安装不多解释 npm install --save-dev gulp-notify 使用 例1： var notify = require("gulp-notify"); gulp.src("./src/test.ext") .pipe(notify("Hello Gulp!")); 例2： var notify = require("gulp-notify"); gulp.src("./src/test.ext") .pipe(notify("Found file: <%= file.relative %>!")); 有关更多输入，请参见 示例 ，或参见 API 部分。 注释/提示 即使出错， gulp-notify 也会传递 vinyl files 。因此，如果您使用的是 gulp-plumber ，如果通知程序返回错误，则运行不会中断。 如果你想通知错误，可以使用 gulp-plumber 不中断运行，迫使你不得不重新启动gulp。 您可以使用 notify.onError() 作为 gulp-plumber 的 errorHandler ，如下所示： gulp.src("../test

更多gulp常用插件使用请访问： gulp常用插件汇总 gulp-size 这是一款显示项目的大小插件。 更多使用文档请点击访问gulp-size工具官网 。 安装 一键安装不多解释 npm install --save-dev gulp-size 使用 const gulp = require('gulp'); const size = require('gulp-size'); exports.default = () => ( gulp.src('fixture.js') .pipe(size()) .pipe(gulp.dest('dist')) ); API size(options?) options 类型: object title 类型： string 默认值：'' 给它起一个标题，以便可以区分一次记录的多个实例的输出。 gzip 类型： boolean 默认值： false 改为显示压缩的大小。 pretty 类型： boolean 默认值： true 显示预设的大小： 1337 B → 1.34 kB 。 showFiles 类型： boolean 默认值： false 显示每个文件的大小，而不只是总大小。 showTotal 类型： boolean 默认值： true 显示所有文件的总数。 size.size 类型： number 示例：12423000`

更多gulp常用插件使用请访问： gulp常用插件汇总 gulp-cache 这是一款基于临时文件的gulp缓存代理任务。 更多使用文档请点击访问gulp-cache工具官网 。 安装 一键安装不多解释 npm install --save-dev gulp-cache 使用 简单使用： import gulp from 'gulp'; import favicons from 'gulp-favicons'; import srcset from 'gulp-srcset'; import cache from 'gulp-cache'; gulp.task('favicon', () => gulp.src('src/favicon.svg') .pipe(cache( // 目标插件，其输出将被缓存 favicons(faviconsConfig), //`gulp-cache` 插件的选项. { //用桶存储缓存中的收藏夹图标。 name: 'favicons' } )) .pipe(gulp.dest('./favicons')) ); gulp.task('images', () => gulp.src('src/**/*.{jpg,png,svg}') .pipe(cache( // 目标插件，其输出将被缓存 srcset(srcsetRules), //`gulp

更多gulp常用插件使用请访问： gulp常用插件汇总 gulp-rev-delete-origina 这是一款删除由 gulp-rev 或 gulp-rev-all 重写的原始文件 。 更多使用文档请点击访问gulp-rev-delete-origina工具官网 。 安装 一键安装不多解释 npm install --save-dev gulp-rev-delete-origina 使用 var gulp = require('gulp'); var rev = require('gulp-rev'); var revcss = require('gulp-rev-css-url'); var revdel = require('gulp-rev-delete-original'); gulp.task('rev', function () { return gulp.src('./app/**/*') .pipe(rev()) .pipe(revcss()) .pipe(revdel()) .pipe(gulp.dest('./build/')) ; }); 参数： exclude 过滤器， RegExp 或 function 允许您排除某些文件，使其不被删除。 例： RegExp: revdel({ exclude: /build\.css$/ }); Function: