gulp-chef

重复使用 gulp 任务
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 郝君博
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

支援 Gulp 4.0,允许嵌套配置任务及组态。以优雅、直觉的方式,重复使用 gulp 任务。

编码的时候你遵守 DRY 原则,那编写 gulpfile.js 的时候,为什么不呢?

功能

  • 支援 Gulp 4.0,

  • 自动载入本地 recipe,

  • 支援透过 npm 安装 plugin,

  • 支援嵌套任务并且允许子任务继承组态配置,

  • 支援向前、向后参照任务,

  • 透过组态配置即可处理串流:譬如 merge, queue, 或者 concat,

  • 透过组态配置即可控制子任务的执行: parallel 或者 series,

  • 支援条件式组态配置,

  • 支援命令行指令,查询可用的 recpies 及使用方式,以及

  • 支援命令行指令,查询可用的任务说明及其组态配置。

问与答


问: gulp-chef 违反了 gulp 的『编码优于组态配置 (preferring code over configuration)』哲学吗?

答: 没有, 你还是像平常一样编码, 并且将可变动部份以组态配置的形式萃取出来。

Gulp-chef 透过简化以下的工作来提高使用弹性:

分割任务到不同的档案,以及

让任务可分享并立即可用


问: 有其它类似的替代方案吗?

答: 有,像 gulp-cozy, gulp-starter , elixir, 还有更多其他方案


问: 那么,跟其它方案比起来,gulp-chef 的优势何在?

答:

  • Gulp-chef 不是侵入式的。它不强迫也不限定你使用它的 API 来撰写通用任务 (recipe)。

  • Gulp-chef 强大且易用。它提供了最佳实务作法,如:合并串流、序列串流等。这表示,你可以让任务『只做一件事并做好(do one thing and do it well)]』,然后使用组态配置来组合任务。

  • Gulp-chef 本身以及共享任务 (plugin) 都是标准的 node 模组。你可以透过 npm 安装并管理依赖关系,不再需要手动复制工具程式库或任务程式码,不再需要再担心忘记更新某个专案的任务,或者担心专案之间的任务版本因各自修改而导致不一致的状况。

  • Gulp-chef 提供极大的弹性,让你依喜好方式决定如何使用它: 『最精简(minimal)』 或『最全面(maximal)』,随你选择。

gulpfile.js 范例

var gulp = require('gulp');
var chef = require('gulp-chef');

var ingredients = {
    src: 'src/',
    dest: 'dist/',
    clean: {},
    make: {
        styles: {
            recipe: 'copy',
            src: '**/*.js'
        },
        browserify: {
            bundle: {
                entry: 'main.js'
            }
        }
    },
    build: ['clean', 'make'],
    default: 'build'
};

var meals = chef(ingredients);

gulp.registry(meals);
  • awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程。 被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将保持实时更新同步。PS:进都进来了,就顺便看看其他的吧: awesome-nodejs-cn awesome-npm-cn awesome-react-cn awesome-react-native-

  • 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程。 被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将保持实时更新同步。 PS:进都进来了,就顺便看看其他的吧: awesome-nodejs-cn awesome-angularjs-cn awesome-react-cn awesome-npm-cn awesome-react-n

  • 承接前一篇《 做一个合格的前端,gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。 **【我的新作观点网: http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考的网站)。 PS:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引、自定义富文本编辑器、图片上传压缩水印等等。】** 之前我也整理过一篇《javascript功

  • awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程。 被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将保持实时更新同步。 PS:进都进来了,就顺便看看其他的吧: awesome-nodejs-cn awesome-angularjs-cn awesome-react-cn awesome-npm-cn

  • 前言 Webpack与Gulp、Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景

 相关资料
  • 问题内容: 我想遍历一个对象,并在每次迭代时将文件路径数组传递给gulp.src,然后对这些文件进行一些处理。下面的代码仅用于说明目的,因为return语句会在第一次通过时终止循环,因此实际上将无法工作。 这是基本思想。有关如何执行此操作的任何想法? 问题答案: 我能够使用合并流实现这一目标。如果有人感兴趣,这里是代码。这个想法是在循环内创建一个流数组,并在完成迭代后合并它们:

  • 本文向大家介绍使用gulp-clean-css和gulp-rename,包括了使用gulp-clean-css和gulp-rename的使用技巧和注意事项,需要的朋友参考一下 示例 首先,安装gulp,gulp-clean-css并gulp-rename在本地项目目录中 比将以下minify-css任务添加到您的gulpfile.js 在这里执行文件的缩小并将其重命名为.pipe(cleanCSS

  • 我无法安装gulp,我查看了很多解决方案,但找不到解决方案。 它开始安装,但随后给出一个错误。 有什么想法吗?

  • 这篇快速上手指南将教你如何使用Gulp构建TypeScript,和如何在Gulp管道里添加Browserify,uglify或Watchify。 本指南还会展示如何使用Babelify来添加Babel的功能。 这里假设你已经在使用Node.js和npm了。 我们首先创建一个新目录。 命名为proj,也可以使用任何你喜欢的名字。 mkdir proj cd proj 我们将以下面的结构开始我们的工程

  • 更改历史 * 2017-11-12 杨海月 增加xxx内容,更改xxx内容,删除xxx内容 * 2017-11-01 胡小根 初始化文档 第一章 历史、现状及发展 1.1 gulp历史 gulp是前端开发过程中一种基于流的 代码构建工具 ,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可

  • 无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上。及其不利于团队协作。建议使用 less 作为 css 预处理器。 如果因为 less 不支持自定义函数选择用 sass 可以使用 less-plugin-functions 让 less 支持自定义函数。 gulp-sass 本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢,