Gulp Data: getting started, plug-ins, scaffolding, package list

A list of gulP resources, plugins and use examples dedicated to building a better front-end engineering build process.

Inspired by the awesome list of foreigners, feel the need to translate a copy, for domestic programmers to do something, this list will be updated in real time synchronization. PS: Now that we’re all in, let’s take a look at the rest:

• awesome-nodejs-cn

• awesome-npm-cn

• awesome-react-cn

• awesome-react-native-cn

The Github address of the project is awesome-react-cn. Welcome to start. If you want to contribute, please Pull Requests.

resources

Common resources

• website

• Making library

• The plug-in registry

• NPM module

• Plugin blacklist

The official documentation

• Quick start

• The API documentation

• CLI document

• Start writing a plugin

• Use the trick

organization

• StackOverflow

• Twitter

Introductory tutorial

Introduction to Gulp

• Use Gulp to build the front-end engineering

• Easily automate your front-end engineering with gulp.js

• Gulp, visualization of front-end engineering

• What is gulp.js?

• Use Gulp to insert Scripts and Styles tags directly into your HTML

• Learn how to use gulp.js in 5 lessons

• How did I get rid of front-end engineering?

• Start Gulp Task for the first time

• Why don’t you write your own Gulp plugin?

• Six of the best Gulp practices to radically improve your development experience

• Gulp beginner tutorial

Introduction to Gulp 4

• Example of migrating to Gulp 4

• Gulp 4: New task execution systems – gulp.parallel and gulp.series

Gulp with Browserify

• Gulp + Browserify, the Gulp-y Way

• Gulp + Browserify

• Build Browserify and Watchify quickly

Gulp with Angular

• What does Angular Project need – What does Gulp provide

Gulp with Angular and Browserify

• Build advanced AngularJS engineering structures using Gulp, Node and Browserify

Gulp with React and Browserify

• Browserify, Gulp, and React

• Taking React to the Next Level: Mixins, Gulp, and Browserify

Gulp with Ember

• Improve your ember.js workflow with gulp.js

Other resources

• Gulp memo

• Gulp listing

The plug-in

compile

• Gulp-sass – Compiles sass to CSS using libsass

• Gulp-ruby-sass – Compile sass to CSS with Ruby sass

• Gulp-compass – Compiles to CSS with Ruby Sass and CompassSass

• Gulp-less-less compiles to CSS.

• Gulp-stylus -stylus compiles to CSS.

• Gulp-postcss-pipe CSS Uses postCSS processors with a single parse.

• Gulp-coffee-coffeescript compiles to JavaScript.

• Gulp-typescript -typescript compiles to JavaScript.

• Gulp-react-facebook React JSX template compiled into JavaScript.

• Webpack-stream – Uses webpack integration in Gulp.

• Gulp-babel-es6 compiles to ES5 via Babel.

• Gulp-traceur-es6 compiles to ES5 via traceur.

• Gulp-regenerator-es6 is compiled to ES5 via regenerator.

• Gulp-es6-transpiler – Obsolete] ES6 compiles to ES5 via [ES6-transpiler.

• gulp-myth – Myth – a polyfill for future versions of the CSS spec.

• Gulp – cssNext – Obsolete using the next generation CSS specification via [cssNext.

merge

• Gulp -concat – Merge files.

The compression

• Gulp-clean-css – Compressed CSS through clean-CSS.

• Gulp-csso – Compression of CSS through CSSO.

• Gulp-uglify – Compressed JavaScript via UglifyJS2.

• Gulp-htmlmin – Compress HTML through html-minifier.

• Gulp-minify-html – Compress HTML by minimizing.

• Gulp-imagemin – Compress PNG, JPEG, GIF and SVG images through Imagemin.

• Gulp-svgmin – Compress SVG files using gulp

To optimize the

• Gulp-uncss – Removes unused CSS selectors through uncSS.

• Gulp-css-base64 – Turns all resources in a CSS file (declared with URL ()) into URI strings for the base64-encoded data

• Gulp -svg2png – Convert SVGs to PNGs

• Gulp-responsive – Generate pictures of different sizes

• Gulp-svgstore – merges SVG files into a
  
  element
  

• Gulp-iconfont – Create icon fonts from SVG ICONS

Resource injection

• Gulp-useref-parses the script or style tags inside a particular tag in an HTML file, merges them into a script or CSS file, and replaces them.

• Gulp-inject – Inserts specified CSS or JS files as tags into specified tags in HTML.

• Wiredep – Automatically injects Bower dependencies into HTML files.

The template

• Gulp-angular-templatecache – Contact and register AngularJS templates in $templatecache

• Gulp-jade-jade converts to HTML.

• The gulp-Handlebars – Handlebars template is converted to JavaScript.

• The gulp-HB-Handlebars template is converted to HTML.

• The gulp-nunjucks-nunjucks template is converted to JavaScript.

• Convert the gulp-dustjs-dust template to JavaScript.

• The gulp-riot-riot template is converted to JavaScript.

• Gulp -markdown -markdown → HTML

• The gulp-template-Lodash template is converted to JavaScript.

• Gulp-swig -swig template is converted to HTML.

• Gulp plugin for [remark] gulp plugin (github.com/wooorm/rema… Handle markdown through plug-ins

Code check

• Gulp-csslint – Automatically verifies CSS with cSSLint.

• Gulp-htmlhint – Verifies HTML with htmlHint.

• Gulp-jshint – Finds errors and potential problems with jshint.

• Gulp-jscs – Check JavaScript code style through JSCS.

• Gulp – CoffeelInt – a check used to ensure consistency in the style of CoffeeScript code.

• Gulp-tslint-gulp TypeScript code validates plug-ins.

• Gulp-eslint-ecmascript /JavaScript code validation.

• Gulp – w3CJS – Validate HTML with W3CJS.

• Gulp-lesshint – Verifies LESS with lesshint.

Real-time load

• Browser-sync – Ensures that multiple browsers or devices display recipes in sync.

• Gulp -livereload – gulp real-time loading plugin.

The cache

• Gulp-changed – Allows only the changed files to pass.

• Gulp-cached – a simple file memory cache.

• Gulp -remember and recycle the passed file.

• Gulp-newer – Allows only new source code to pass.

Flow control

• Merge-stream – Merges multiple streams into an inserted stream.

• Streamqueue – Streams that are gradually entered into a queue.

• Run-sequence – Run dependent gulpTasks as required.

• Gulp-if – Runs the task according to conditions.

The log

• Gulp-notify-gulp notification plug-in.

• Gulp-size – Displays the size of your project.

• Gulp -debug the stream of files to see which files pass through your gulp pipe.

test

• Gulp-mocha – Runs the Mocha test case.

• Gulp-jasmine – Runs the Jasmine 2 test case in Node.js.

• Gulp-protractor – Wraps gulp for the Protractor test case.

• Gulp-coverage – Runs separate reports for Node.js coverage relative to the tests being run.

• Gulp-karma – Runs the karma test case through gulp.

• Gulp-ava – Runs the AVA test case through gulp.

Other plug-ins

• Gulp-util – contains a series of useful plug-ins.

• Plumber – Plumber – Prevent pipe breaking by errors

• Gulp-load-plugins – Automatically loads gulp plugins.

• Main-bower – Automatically gets the bower library files at build time.

• Autoprefixer – Parses CSS and adds browser compatibility prefixes according to rules.

• Gulp -sourcemaps – Provides sourcemap support.

• Gulp-replace – a string replacement plugin for gulp.

• Gulp -rename – Easily rename a file.

• Gulp-rev – Add a hash value to the static file name, for example, unicorn-d41d8cd98f.css.

• Del – Deletes files/folders with globs.

• Gulp-exec – Runs a shell command.

• Gulp-strip -debug – Removes console,alert, and debugger declarations from javascript code.

• Gulp-cssimport – Parses the CSS file, finds the imports, and replaces the connection file with the IMort declaration.

• Gulp-inline-css – Puts CSS attributes from HTML into the style tag.

• Gulp-gh-pages – Publish content to GiHub with pages.

• Gulp-ng-annotate – Adds Angular dependency injection via ng-annotate.

• Gulp-bump – Bump any semvar JSON version by gulp.

• Gulp-file-include – Passes the gulp include file.

• Gulp-zip – Compresses files in zip format.

• Gulp -git – Run the git command through gulp.

• Gulp-filter – Uses globbing to filter files.

• Gulp-preprocess – Configures preprocessing files based on custom content or environment.

The scaffold

The template

• Web-starter-kit – The Web starter kit of Google.

• Gulp-plugin -boilerplate – Creates the start template for the gulp plugin.

• The starting point for application of Polymer-starter -kit -Polymer 1.0.

• Este – The most comprehensive React/Flux development stack and start template for Web applications.

• MNML – Minimum start template for developing responsive HTML5/Sass projects.

• Kraken is a lightweight, mobile-first front-end development start template.

• Angularjs-gulp-browserify – Boilerplate – a start template that uses AngularJS, Sass, gulp, and Browserify technologies.

• Hapi – Ninja – A start template using Node.js, hapi, and Swig techniques.

• Laravel -5- Boilerplate – A Laravel 5 start plate.

• React-starterkit – A React start template with react-Router, Reflux, Jest, webpack, gulp and Stylus;

Yeoman generator

• Generator-gulp -webapp – A gulP generator for A popular Web application.

• Generator-gulp-angular – Yeoman generator that uses gulp AngularJS.

• Generator-react-gulp-browserify – a Yeoman generator for the React library, including gulp, Browserify, Browsersync and Bootstrap.

• Generator-node-gulp – A node. js module generator that contains gulp and Mocha.

• Generator-gulp-bootstrap – A Yeoman generator containing bootstrap, gulp and libsass.

• Generator – Angulpify -a Yeoman generator that contains AngularJS, gulp and Browserify.

• Generator – Ionic-gulp – Yeoman generator for an Ionic factory.

• Generator-gulp-plugin-boilerplate – A scaffold for output gulp plugin boilerplate.

• Generator – Jekyllized – a Jekyll workflow that includes gulp, Sass, AutoPrefixer, resource optimization, caching, etc.

other

• Elixir – a clean, flexible API for defining basic GULp tasks for your application.

• Gulp -app – Uses gulp as an application (OS X).

• Example unit test for the LMN-gulp-tasks-gulp task.

• Gulp-chef – an elegant and easy way to repeat gulp tasks.