BUILD-TOOLS.HTML

<h1 id="build-tools">Build Tools</h1>
<p><strong>Context: <a href="../README.md">frontend-dev-bookmarks</a> / Workflow</strong></p>
<p>Toolkits and their ecosystems, that help you automate painful and repeated tasks.</p>
<p><a href="http://frontend.directory/"><img src="https://img.shields.io/badge/frontend-directory-blue.svg?style=flat-square" alt="frontend.directory" /></a> <a href="https://gitter.im/dypsilon/frontend-dev-bookmarks"><img src="https://img.shields.io/gitter/room/dypsilon/frontend-dev-bookmarks.svg?style=flat-square&amp;maxAge=2592000" alt="Gitter" /></a> <a href="https://twitter.com/FrontendDir"><img src="https://img.shields.io/badge/follow-twitter-55acee.svg?style=flat-square" alt="Twitter" /></a></p>
<table style="width:58%;">
<colgroup>
<col style="width: 58%" />
</colgroup>
<tbody>
<tr class="odd">
<td>+ <strong><a href="http://indigounited.com/automaton/">Automaton</a></strong>: Task automation tool built in JavaScript. + <strong><a href="http://gruntjs.com/">Grunt</a></strong>: Grunt is a task-based command line build tool for JavaScript projects. + <strong><a href="http://mattbailey.io/a-beginners-guide-to-grunt-redux.html">A beginner’s guide to Grunt: Redux</a></strong>: Simple Grunt boilerplate for frontend workflow with detailed instructions. + <strong><a href="https://github.com/tsvensen/gruntstart">GruntStart</a></strong>: A Grunt-enabled head-start with the H5BP, jQuery, Modernizr, and Respond. The building blocks to quickly get started with Grunt to create an optimized website. + <strong><a href="http://mattbailey.io/grunt-synchronised-testing-between-browsers-devices">Synchronised Testing Between Browsers/Devices</a></strong>: The article describes an easy way to test your projects on your devices. + <strong><a href="http://ruudud.github.io/2012/12/22/grunt/">Web development is getting complex. Let’s go shopping.</a></strong>: A step by step tutorial for building a new project with grunt. + <strong><a href="http://gulpjs.com/">Gulp</a></strong>: Gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. It’s very fast, platform-agnostic and simple. + <strong>Articles &amp; Tutorials</strong>: Publications about gulp or step by step guides for setting up and using gulp in a project. + <strong>Building with Gulp 3 and 4 (Series)</strong>: Great series of articles about single components and gulp as a whole. + <strong><a href="http://blog.reactandbethankful.com/posts/2015/04/23/building-with-gulp-3-and-4-part-1-examples/">Part 1: Examples</a></strong>: Introduction to gulp and gulpfile.js. + <strong><a href="http://blog.reactandbethankful.com/posts/2015/04/23/building-with-gulp-3-and-4-part-2-gulp-anatomy/">Part 2: Gulp’s anatomy</a></strong>: Orchestrator, Undertaker, Vinyl and Vinyl FS, Gulp Plugins. + <strong><a href="http://blog.reactandbethankful.com/posts/2015/04/28/building-with-gulp-3-and-4-part-3-writing-transformers/">Part 3: Writing transformers</a></strong>: Using map-stream, though2 and event-stream. + <strong><a href="http://blog.reactandbethankful.com/posts/2015/05/01/building-with-gulp-4-part-4-incremental-builds/">Part 4: Incremental builds</a></strong>: Building files which changed since last run and caching. + <strong><a href="http://blog.reactandbethankful.com/posts/2015/05/05/building-with-gulp-part-5-caveats/">Part 5: Caveats</a></strong>: Error management in Gulp 3 and “MANY:1 disguised as a 1:1” problem. + <strong><a href="https://medium.com/@contrahacks/gulp-3828e8126466">The vision, history, and future of the project (Apr. 2014)</a></strong>: The article talks about Streams, Vinyl, Vinyl Adapters, Orchestrator and Error Management in Gulp 4. + <strong><a href="http://scm.io/blog/hack/2014/07/why-gulp-might-not-be-the-answer/">Why Gulp might not be the Answer</a></strong>: … there is still a conceptual problem that Gulp has yet to address. Many build steps are not 1:1 (one file in, one file out) but rather n:1 or 1:n. + <strong>CSS</strong>: Gulp plugins for working with CSS files. + <strong><a href="https://github.com/scniro/gulp-clean-css">gulp-clean-css</a></strong>: gulp plugin to minify CSS, using clean-css. + <strong><a href="https://www.npmjs.com/package/gulp-cssnano">gulp-cssnano</a></strong>: Minify CSS with cssnano. + <strong>Concatenation</strong>: Plugins for file concatenation. For example bundling CSS or JavaScript files. + <strong><a href="https://www.npmjs.com/package/gulp-concat">gulp-concat</a></strong>: This plugin will concat files by your operating systems newLine. It will take the base directory from the first file that passes through it. + <strong><a href="https://www.npmjs.com/package/gulp-group-concat">gulp-group-concat</a></strong>: Concats groups of files into a smaller number of files + <strong>Deployment</strong>: Plugins for pushing built files into production. + <strong><a href="https://github.com/sindresorhus/gulp-tar">gulp-tar</a></strong>: Create tarball from files. + <strong><a href="https://github.com/morris/vinyl-ftp">vinyl-ftp</a></strong>: Blazing fast vinyl adapter for FTP. + <strong><a href="https://github.com/izaakschroeder/vinyl-s3">vinyl-s3</a></strong>: Use S3 as a source or destination of vinyl files. + <strong>Ecosystem</strong>: The network of developers and plugins around gulp. + <strong><a href="https://github.com/search?q=%40sindresorhus+gulp-"><span class="citation" data-cites="sindresorhus">@sindresorhus</span> plugins</a></strong>: A collection of plugins by Sindre Sorhus. + <strong><a href="https://www.npmjs.com/browse/keyword/gulpfriendly">Gulp Friendly NPM Packages</a></strong>: Normal node packages that work with gulp. + <strong>Filters</strong>: Plugins for filtering files in a vinyl stream. + <strong><a href="https://www.npmjs.com/package/gulp-cache">gulp-cache</a></strong>: A temp file based caching proxy task for gulp. + <strong><a href="https://www.npmjs.com/package/gulp-cached">gulp-cached</a></strong>: A simple in-memory file cache for gulp. + <strong><a href="https://github.com/sindresorhus/gulp-changed">gulp-changed</a></strong>: Only pass through changed files. + <strong><a href="https://www.npmjs.com/package/gulp-filter">gulp-filter</a></strong>: Filter files in a vinyl stream. + <strong><a href="https://github.com/tschaub/gulp-newer">gulp-newer</a></strong>: Pass through newer source files only. + <strong><a href="https://github.com/ahaurw01/gulp-remember">gulp-remember</a></strong>: A plugin for gulp that remembers and recalls files passed through it. + <strong><a href="https://www.npmjs.com/package/vinyl-diff">vinyl-diff</a></strong>: This library allows you to perform diffs between streams of vinyl. + <strong>Images</strong>: Plugins for working with images. + <strong><a href="https://github.com/sindresorhus/gulp-imagemin">gulp-imagemin</a></strong>: Minify PNG, JPEG, GIF and SVG images. + <strong><a href="https://github.com/sindresorhus/gulp-webp">gulp-webp</a></strong>: Convert PNG, JPEG, TIFF images to WebP. + <strong>JavaScript</strong>: Module loaders, minifiers and other tools for working with JavaScript files. + <strong><a href="https://www.npmjs.com/package/gulp-pure-cjs">gulp-pure-cjs</a></strong>: Gulp plugin for Pure CommonJS builder. + <strong><a href="https://www.npmjs.com/package/gulp-uglify">gulp-uglify</a></strong>: Minify files with UglifyJS. + <strong><a href="https://www.npmjs.com/package/yoloader">yoloader</a></strong>: A CommonJS module loader implementation. It provides tools to bundle a CommonJS based project and to load such bundles. + <strong>SourceMaps</strong>: A source map provides a way of mapping code within a compressed file back to it’s original position in a source file. + <strong><a href="https://github.com/floridoo/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support">Plugins with gulp sourcemaps support</a></strong>: A list of plugins which support gulp-sourcemaps. + <strong><a href="https://github.com/floridoo/gulp-sourcemaps">gulp-sourcemaps</a></strong>: Source map support for Gulp.js + <strong><a href="https://www.npmjs.com/package/vinyl-sourcemaps-apply">vinyl-sourcemaps-apply</a></strong>: Apply a source map to a vinyl file, merging it with preexisting source maps. + <strong>Utility</strong>: Tools and parts for building gulp plugins. + <strong><a href="https://www.npmjs.com/package/gulp-count">gulp-count</a></strong>: Count files in a vinyl stream. + <strong><a href="https://www.npmjs.com/package/gulp-debug">gulp-debug</a></strong>: Debug vinyl file streams to see what files are run through your gulp pipeline. + <strong><a href="https://github.com/sindresorhus/gulp-size">gulp-size</a></strong>: Logs out the total size of files in the stream and optionally the individual file-sizes. + <strong><a href="https://www.npmjs.com/package/lazypipe">lazypipe</a></strong>: Lazypipe allows you to create an immutable, lazily-initialized pipeline. It’s designed to be used in an environment where you want to reuse partial pipelines, such as with gulp. + <strong><a href="https://github.com/dominictarr/map-stream">map-stream</a></strong>: Create a through stream from an asyncronous function. + <strong><a href="https://github.com/gulpjs/vinyl">Vinyl</a></strong>: Vinyl is a very simple metadata object that describes a file. + <strong><a href="https://github.com/sindresorhus/gulp-chmod">gulp-chmod</a></strong>: Change permissions of Vinyl files. + <strong><a href="https://github.com/hparra/gulp-rename">gulp-rename</a></strong>: A plugin to rename files easily. + <strong><a href="https://www.npmjs.com/package/mem-fs">mem-fs</a></strong>: Simple in-memory vinyl file store. + <strong><a href="https://www.npmjs.com/package/vinyl-ast">vinyl-ast</a></strong>: Parse-once and generate-once AST tool bridge for Gulp plugins. + <strong><a href="https://www.npmjs.com/package/vinyl-buffer">vinyl-buffer</a></strong>: Creates a transform stream that takes vinyl files as input, and outputs buffered (isStream() === false) vinyl files as output. + <strong><a href="https://www.npmjs.com/package/vinyl-file">vinyl-file</a></strong>: Create a vinyl file from an actual file. + <strong><a href="https://github.com/wearefractal/vinyl-fs">vinyl-fs</a></strong>: Vinyl adapter for the file system. + <strong><a href="https://www.npmjs.com/package/vinyl-fs-fake">vinyl-fs-fake</a></strong>: A vinyl adapter that extends vinyl-fs to allow for easy debugging by passing in virtual files instead of globs, and calling a function instead of writing. + <strong><a href="https://www.npmjs.com/package/vinyl-git">vinyl-git</a></strong>: Vinyl adapter for git. + <strong><a href="https://github.com/hughsk/vinyl-map">vinyl-map</a></strong>: Map vinyl files’ contents as strings, so you can easily use existing code without needing yet another gulp plugin! + <strong><a href="https://www.npmjs.com/package/vinyl-paths">vinyl-paths</a></strong>: Get the file paths in a vinyl stream. + <strong><a href="https://www.npmjs.com/package/vinyl-source-buffer">vinyl-source-buffer</a></strong>: Convert a text stream into a vinyl pipeline whose content is a buffer. + <strong><a href="https://www.npmjs.com/package/vinyl-source-stream">vinyl-source-stream</a></strong>: Use conventional text streams at the start of your gulp or vinyl pipelines, making for nicer interoperability with the existing npm stream. + <strong><a href="https://www.npmjs.com/package/vinyl-to-stream">vinyl-to-stream</a></strong>: Convert a vinyl stream to a text stream. + <strong><a href="https://www.npmjs.com/package/vinyl-transform">vinyl-transform</a></strong>: Wraps standard text transform streams so you can write fewer gulp plugins. Fulfills a similar use case to vinyl-map and vinyl-source-stream. + <strong><a href="http://mimosajs.com">Mimosa</a></strong>: Mimosa is a batteries included web development workflow tool that will get you coding in seconds rather than hunting down plugins and wrangling config for hours. + <strong><a href="https://github.com/amwmedia/plop">Plop</a></strong>: Micro-generator framework that makes it easy for an entire team to create files with a level or uniformity. + <strong><a href="http://newbranch.cn/ui-development-with-es6-javascript-part-x-automating-workflow-with-plop/">Automating Workflow with plop</a></strong>: Automating UI Development with Riot.js and ES6 Javascript. + <strong><a href="http://webpack.github.io/">Webpack</a></strong>: Webpack is a module bundler. It takes modules with dependencies and generates static assets representing those modules. + <strong><a href="https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b">Block, Element, Modifying Your JavaScript Components</a></strong>: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack. + <strong><a href="http://dapperdeveloper.com/2016/05/18/developing-with-docker-and-webpack/">Developing with Docker and Webpack</a></strong>: Chris Harrington explains how to create a development environment with Webpack and Docker to match the production as much as possible. + <strong><a href="http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html">Full-Stack Redux Tutorial</a></strong>: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development. + <strong><a href="http://www.davidmeents.com/how-to-set-up-webpack-image-loader/">How to Set Up Webpack Image Loader</a></strong>: This brief tutorial will help you set up an image loader in Webpack. + <strong><a href="http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/">The SoundCloud Client in React + Redux</a></strong>: After finishing this step by step tutorial you will be able to author your own React + Redux project with Webpack and Babel. + <strong><a href="http://survivejs.com/webpack/">Webpack from Apprentice to Master</a></strong>: The purpose of this guide is to help you get started with Webpack and then go beyond basics. + <strong><a href="http://www.webpackbin.com/">WebpackBin</a></strong>: A webpack code sandbox. + <strong><a href="http://devlog.disco.zone/2016/06/01/webpack/">Why I think Webpack is the Right Approach To Build Pipelines</a></strong>: Thomas Boyt compares how Grunt, Gulp, Broccoli and Webpack discover dependencies. + <strong><a href="http://yeoman.io/">Yeoman</a></strong>: Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It provides a generator ecosystem.</td>
</tr>
</tbody>
</table>
<h1 id="license">License</h1>
<p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p>
<p>Please provide a link back to this repository. This is not necessary for GitHub forks.</p>