Build Tools

Context: frontend-dev-bookmarks / Workflow
Toolkits and their ecosystems, that help you automate painful and repeated tasks.

Automaton: Task automation tool built in JavaScript.
Grunt: Grunt is a task-based command line build tool for JavaScript projects.
- A beginner’s guide to Grunt: Redux: Simple Grunt boilerplate for frontend workflow with detailed instructions.
- GruntStart: 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.
- Synchronised Testing Between Browsers/Devices: The article describes an easy way to test your projects on your devices.
- Web development is getting complex. Let’s go shopping.: A step by step tutorial for building a new project with grunt.

Gulp: 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.

Articles & Tutorials: Publications about gulp or step by step guides for setting up and using gulp in a project.

Building with Gulp 3 and 4 (Series): Great series of articles about single components and gulp as a whole.
- Part 1: Examples: Introduction to gulp and gulpfile.js.
- Part 2: Gulp’s anatomy: Orchestrator, Undertaker, Vinyl and Vinyl FS, Gulp Plugins.
- Part 3: Writing transformers: Using map-stream, though2 and event-stream.
- Part 4: Incremental builds: Building files which changed since last run and caching.
- Part 5: Caveats: Error management in Gulp 3 and “MANY:1 disguised as a 1:1” problem.

      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="http://scm.io/blog/hack/2014/07/why-gulp-might-not-be-the-answer/">Why Gulp might not be the Answer</a></strong>: &#8230; 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.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>CSS</strong>: Gulp plugins for working with CSS files.</p> <ul dir="auto">
      <li>
        <strong>gulp-clean-css</strong>: gulp plugin to minify CSS, using clean-css.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-cssnano">gulp-cssnano</a></strong>: Minify CSS with cssnano.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>Concatenation</strong>: Plugins for file concatenation. For example bundling CSS or JavaScript files.</p> <ul dir="auto">
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-group-concat">gulp-group-concat</a></strong>: Concats groups of files into a smaller number of files
      </li>
    </ul>
  </li>
  
  <li>
    <strong>Deployment</strong>: Plugins for pushing built files into production.</p> <ul dir="auto">
      <li>
        <strong>gulp-tar</strong>: Create tarball from files.
      </li>
      <li>
        <strong>vinyl-ftp</strong>: Blazing fast vinyl adapter for FTP.
      </li>
      <li>
        <strong>vinyl-s3</strong>: Use S3 as a source or destination of vinyl files.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>Ecosystem</strong>: The network of developers and plugins around gulp.</p> <ul dir="auto">
      <li>
        <strong>@sindresorhus plugins</strong>: A collection of plugins by Sindre Sorhus.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/browse/keyword/gulpfriendly">Gulp Friendly NPM Packages</a></strong>: Normal node packages that work with gulp.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>Filters</strong>: Plugins for filtering files in a vinyl stream.</p> <ul dir="auto">
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-cache">gulp-cache</a></strong>: A temp file based caching proxy task for gulp.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-cached">gulp-cached</a></strong>: A simple in-memory file cache for gulp.
      </li>
      <li>
        <strong>gulp-changed</strong>: Only pass through changed files.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-filter">gulp-filter</a></strong>: Filter files in a vinyl stream.
      </li>
      <li>
        <strong>gulp-newer</strong>: Pass through newer source files only.
      </li>
      <li>
        <strong>gulp-remember</strong>: A plugin for gulp that remembers and recalls files passed through it.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/vinyl-diff">vinyl-diff</a></strong>: This library allows you to perform diffs between streams of vinyl.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>Images</strong>: Plugins for working with images.</p> <ul dir="auto">
      <li>
        <strong>gulp-imagemin</strong>: Minify PNG, JPEG, GIF and SVG images.
      </li>
      <li>
        <strong>gulp-webp</strong>: Convert PNG, JPEG, TIFF images to WebP.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>JavaScript</strong>: Module loaders, minifiers and other tools for working with JavaScript files.</p> <ul dir="auto">
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-pure-cjs">gulp-pure-cjs</a></strong>: Gulp plugin for Pure CommonJS builder.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-uglify">gulp-uglify</a></strong>: Minify files with UglifyJS.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
    </ul>
  </li>
  
  <li>
    <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.</p> <ul dir="auto">
      <li>
        <strong>Plugins with gulp sourcemaps support</strong>: A list of plugins which support gulp-sourcemaps.
      </li>
      <li>
        <strong>gulp-sourcemaps</strong>: Source map support for Gulp.js
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>Utility</strong>: Tools and parts for building gulp plugins.</p> <ul dir="auto">
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/gulp-count">gulp-count</a></strong>: Count files in a vinyl stream.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
      <li>
        <strong>gulp-size</strong>: Logs out the total size of files in the stream and optionally the individual file-sizes.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/lazypipe">lazypipe</a></strong>: Lazypipe allows you to create an immutable, lazily-initialized pipeline. It&#8217;s designed to be used in an environment where you want to reuse partial pipelines, such as with gulp.
      </li>
      <li>
        <strong>map-stream</strong>: Create a through stream from an asyncronous function.
      </li>
    </ul>
  </li>
  
  <li>
    <strong>Vinyl</strong>: Vinyl is a very simple metadata object that describes a file.</p> <ul dir="auto">
      <li>
        <strong>gulp-chmod</strong>: Change permissions of Vinyl files.
      </li>
      <li>
        <strong>gulp-rename</strong>: A plugin to rename files easily.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/mem-fs">mem-fs</a></strong>: Simple in-memory vinyl file store.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/vinyl-ast">vinyl-ast</a></strong>: Parse-once and generate-once AST tool bridge for Gulp plugins.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/vinyl-file">vinyl-file</a></strong>: Create a vinyl file from an actual file.
      </li>
      <li>
        <strong>vinyl-fs</strong>: Vinyl adapter for the file system.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/vinyl-git">vinyl-git</a></strong>: Vinyl adapter for git.
      </li>
      <li>
        <strong>vinyl-map</strong>: Map vinyl files&#8217; contents as strings, so you can easily use existing code without needing yet another gulp plugin!
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/vinyl-paths">vinyl-paths</a></strong>: Get the file paths in a vinyl stream.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/vinyl-to-stream">vinyl-to-stream</a></strong>: Convert a vinyl stream to a text stream.
      </li>
      <li>
        <strong><a rel="nofollow noopener" target="_blank" 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.
      </li>
    </ul>
  </li>
</ul>

Mimosa: 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.
Plop: Micro-generator framework that makes it easy for an entire team to create files with a level or uniformity.
- Automating Workflow with plop: Automating UI Development with Riot.js and ES6 Javascript.
Webpack: Webpack is a module bundler. It takes modules with dependencies and generates static assets representing those modules.
- Block, Element, Modifying Your JavaScript Components: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
- Developing with Docker and Webpack: Chris Harrington explains how to create a development environment with Webpack and Docker to match the production as much as possible.
- Full-Stack Redux Tutorial: 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.
- How to Set Up Webpack Image Loader: This brief tutorial will help you set up an image loader in Webpack.
- The SoundCloud Client in React + Redux: After finishing this step by step tutorial you will be able to author your own React + Redux project with Webpack and Babel.
- Webpack from Apprentice to Master: The purpose of this guide is to help you get started with Webpack and then go beyond basics.
- WebpackBin: A webpack code sandbox.
- Why I think Webpack is the Right Approach To Build Pipelines: Thomas Boyt compares how Grunt, Gulp, Broccoli and Webpack discover dependencies.
Yeoman: Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It provides a generator ecosystem.

License

This work is licensed under a Creative Commons Attribution 4.0 International License.
Please provide a link back to this repository. This is not necessary for GitHub forks.