Gulp plugin

Earlier we mentioned that when learning to compress JS, CSS, images and other files, you need to use some related plug-ins. Gulp provides some useful plug-ins to handle HTML and CSS, JavaScript, graphics, and some other content. Let's take a look at some of the different types of plugins in gulp.

HTML and CSS plugins

Plug-in	description
autoprefixer	Automatically include prefixes for CSS properties
gulp-browser-sync	Used to monitor all HTML and CSS files in the CSS directory, and perform real-time reloading of pages in all browsers when the files are changed
gulp-useref	Used to replace references to non-optimized scripts or style sheets
gulp-email-design	Create HTML email template, convert CSS style to inline
gulp-uncss	Optimize CSS files and find unused and repeated styles
gulp-csso	Is a CSS optimizer that can minimize CSS files, thereby reducing file size
gulp-htmlmin	Minimize HTML file
gulp-csscomb	Style formatter for making CSS
gulp-csslint	It specifies a CSS linter
gulp-htmlhint	Specify an HTML validator

JavaScript plugin

Plug-in	description
gulp-autopolyfiller	It is the same as autoprefixer, including the necessary polyfill for JavaScript
gulp-jsfmt	Used to search for specific code snippets
gulp-jscs	Used to check JavaScript code style
gulp-modernizr	Specify the HTML, CSS and JavaScript functions provided by the user's browser
gulp-express	Started the gulp express.js web server
gulp-requirejs	Use require.js to combine require.js AMD modules into one file
gulp-plato	Generate complexity analysis report
gulp-complexity	Analyzed the complexity and maintainability of the code
fixmyjs	Fixed JSHint results
gulp-jscpd	Used as a copy/paste detector for source code
gulp-jsonlint	Is a JSON validator
gulp-uglify	JavaScript files minified
gulp-concat	Link CSS files

Unit test plugin

Plug-in	description
gulp-nodeunit	Run Gulp's node unit test
gulp-jasmine	Used to report issues related to output
gulp-qunit	Provide basic console output for QUnit test, and use PhantomJS node module and PhantomJS runner QUnit plug-in
gulp-mocha	Specify the thin packaging around Mocha and run the Mocha test
gulp-karma	Deprecated in Gulp

Graphics plugin

Plug-in	description
gulpicon	Generate sprites from SVG and convert them to PNG
gulp-iconfont	Used with web fonts to create WOFF, EOT, TTF files from SVG
gulp-imacss	Convert image files to data URIs and put them in a single CSS file
gulp-responsive	Generate responsive images for different devices
gulp-sharp	It is used to change and adjust the orientation and background of the image
gulp-svgstore	Combine SVG files and elements into one file
gulp-imagemin&gulp-tinypng	Used to compress PNG, JPEG, GIF, SVG and other images
gulp-spritesmith	Used to create a spritesheet from a set of images and CSS variables

Compiler plugin

Plug-in	description
gulp-less	A few plugins are provided for Gulp
gulp-sass	Provide SASS plug-in for Gulp
gulp-compass	Compass plug-in for Gulp
gulp-stylus	Used to save the stylus in CSS
gulp-coffee	Provide coffeescript plugin for Gulp
gulp-handlebars	Handle plug-in is provided for Gulp
gulp-jst	Provide underline templates in JST
gulp-react	Specify the Facebook React JSX template as JavaScript
gulp-nunjucks	Specify Nunjucks template in JST
gulp- dustjs	Dust template specified in JST
gulp-angular-templatecache	Specify AngularJS template in templateCache

Other plugins

The gulp-clean plugin deletes files and folders, and the gulp-copy plugin copies files from the source file to the new destination.

Plug-in	description
gulp-grunt	Run Grunt tasks from Gulp
gulp-watch	Whenever a change is made, it will monitor the file
gulp-notify	As long as the task fails, it will notify the error message
gulp-git	It allows the use of Git commands.
gulp-jsdoc	Create JavaScript documentation for Gulp
gulp-rev	It provides static asset revisions to file names
gulp-bump	Added the version in the JSON package
gulp-bower-files	Used to inject the pavilion bag
gulp-removelogs	The console.log statement has been removed
gulp-preprocess	Preprocess HTML, JavaScript and other files according to context or environment configuration
gulp-connect	It is used for the web server running LiveReload
gulp-shell	Run Shell commands
gulp-ssh	Connect using SSH and SFTP tasks
gulp-zip	It compresses files and folders
gulp-util	Provide utility tools for gulp plugin
gulp-filesize	It specifies the file size in a human readable format