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.
- The vision, history, and future of the project (Apr. 2014): The article talks about Streams, Vinyl, Vinyl Adapters, Orchestrator and Error Management in Gulp 4.
- Why Gulp might not be the Answer: ... 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.
- Building with Gulp 3 and 4 (Series): Great series of articles about single components and gulp as a whole.
- CSS: Gulp plugins for working with CSS files.
- gulp-clean-css: gulp plugin to minify CSS, using clean-css.
- gulp-cssnano: Minify CSS with cssnano.
- Concatenation: Plugins for file concatenation. For example bundling CSS or JavaScript files.
- gulp-concat: This plugin will concat files by your operating systems newLine. It will take the base directory from the first file that passes through it.
- gulp-group-concat: Concats groups of files into a smaller number of files
- Deployment: Plugins for pushing built files into production.
- Ecosystem: The network of developers and plugins around gulp.
- @sindresorhus plugins: A collection of plugins by Sindre Sorhus.
- Gulp Friendly NPM Packages: Normal node packages that work with gulp.
- Filters: Plugins for filtering files in a vinyl stream.
- gulp-cache: A temp file based caching proxy task for gulp.
- gulp-cached: A simple in-memory file cache for gulp.
- gulp-changed: Only pass through changed files.
- gulp-filter: Filter files in a vinyl stream.
- gulp-newer: Pass through newer source files only.
- gulp-remember: A plugin for gulp that remembers and recalls files passed through it.
- vinyl-diff: This library allows you to perform diffs between streams of vinyl.
- Images: Plugins for working with images.
- gulp-imagemin: Minify PNG, JPEG, GIF and SVG images.
- gulp-webp: Convert PNG, JPEG, TIFF images to WebP.
- JavaScript: Module loaders, minifiers and other tools for working with JavaScript files.
- gulp-pure-cjs: Gulp plugin for Pure CommonJS builder.
- gulp-uglify: Minify files with UglifyJS.
- yoloader: A CommonJS module loader implementation. It provides tools to bundle a CommonJS based project and to load such bundles.
- SourceMaps: A source map provides a way of mapping code within a compressed file back to it’s original position in a source file.
- Plugins with gulp sourcemaps support: A list of plugins which support gulp-sourcemaps.
- gulp-sourcemaps: Source map support for Gulp.js
- vinyl-sourcemaps-apply: Apply a source map to a vinyl file, merging it with preexisting source maps.
- Utility: Tools and parts for building gulp plugins.
- gulp-count: Count files in a vinyl stream.
- gulp-debug: Debug vinyl file streams to see what files are run through your gulp pipeline.
- gulp-size: Logs out the total size of files in the stream and optionally the individual file-sizes.
- lazypipe: 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.
- map-stream: Create a through stream from an asyncronous function.
- Vinyl: Vinyl is a very simple metadata object that describes a file.
- gulp-chmod: Change permissions of Vinyl files.
- gulp-rename: A plugin to rename files easily.
- mem-fs: Simple in-memory vinyl file store.
- vinyl-ast: Parse-once and generate-once AST tool bridge for Gulp plugins.
- vinyl-buffer: Creates a transform stream that takes vinyl files as input, and outputs buffered (isStream() === false) vinyl files as output.
- vinyl-file: Create a vinyl file from an actual file.
- vinyl-fs: Vinyl adapter for the file system.
- vinyl-fs-fake: 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.
- vinyl-git: Vinyl adapter for git.
- vinyl-map: Map vinyl files' contents as strings, so you can easily use existing code without needing yet another gulp plugin!
- vinyl-paths: Get the file paths in a vinyl stream.
- vinyl-source-buffer: Convert a text stream into a vinyl pipeline whose content is a buffer.
- vinyl-source-stream: Use conventional text streams at the start of your gulp or vinyl pipelines, making for nicer interoperability with the existing npm stream.
- vinyl-to-stream: Convert a vinyl stream to a text stream.
- vinyl-transform: Wraps standard text transform streams so you can write fewer gulp plugins. Fulfills a similar use case to vinyl-map and vinyl-source-stream.
- Articles & Tutorials: Publications about gulp or step by step guides for setting up and using gulp in a project.
- 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.
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.