The use of automated build tools during front-end development greatly increased our productivity. Gulp is one of the best automated build tools with a clear API and rich plug-ins. I’ve enjoyed the benefits of Gulp since I first started front-end development.

In the past, the main work of page development was to write HTML, CSS and JS files. Later, the emergence of less, ES6 and various front-end frameworks greatly reduced the amount of development code. To use them, it was necessary to compile first, thus gradually dividing into the development process:

  • Write business code (e.g. Es6, LESS, JSX, etc.)
  • Compile to browser-compatible (JS, CSS, HTML)
  • Automatic browser refresh
  • Upload to the server for publication

Automated build tools allow us to write business code and let the tools do the rest automatically.

Gulp Chinese website

Gulp + node.js

yarn add gulp gulp-load-plugins ejs minimist --dev
Copy the code
  1. Install gulp globally and as a development dependency
  2. Use gulp-load-plugins instead of importing plugins one by one
  3. Extend the native FS module with FS-Extra
  4. Use EJS to compile templates to generate HTML files
  5. Use minimist to get gulp command parameters

The task of gulp is to perform a series of operations in a function like this:

gulp.task('taskname'.function() {
  // do somethings
Copy the code

Using the node command, you can execute the Node.js program, but you can’t express the meaning of the program clearly. The concept of gulp tasks is a logical way to manage Node.js applications. Gulp refers to the wrapped JS module and then defines gulp Task to call the methods in the module.

Using this idea, you can implement a scaffold that automatically creates project catalogs and generates new pages from templates.

Gulp + HTML

yarn add gulp-htmlmin gulp-html-replace gulp-rev gulp-rev-collector --dev
Copy the code
  1. Use gulp-htmlmin to compress HTML, remove page Spaces, comments, delete redundant attributes and other operations. Compress pages with inline javascript and CSS.
  2. Use gulp-rev-collector to replace the file name with the MD5 file name. With gulp-rev, it will add MD5 to the file name and generate a mapping file. You can remove the cache of old files or replace them with CDN addresses when redistributing.
  3. Replace part of an HTML document with gulp-html-replace.

Gulp + less

yarn add gulp-less gulp-autoprefixer gulp-clean-css gulp-concat-css --dev
Copy the code
  1. Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other functions. Most importantly, it supports nesting rules to make CSS easier to maintain. Less needs to be compiled into CSS to be used on a web page, and the gulp-less plugin does just that.
  2. Use gulp-Autoprefixer to automatically handle browser prefixes based on the set browser version.
  3. Use gulp-clean-css to compress CSS files
  4. Merge multiple CSS files using gulp-concat-css

Gulp + ES6

yarn add gulp-babel babel-core babel-preset-es2015 gulp-uglify gulp-concat --dev
Copy the code
  1. Using ES6 can improve work efficiency, webpack babel-loader is now popular, and gulp also has the corresponding plug-in gulp-babel to compile our ES6 code through Babel, need to configure. Babelrc.
  2. Use gulp-uglify to compress javascript files
  3. Merge multiple JS files using gulp-concat

Gulp + browserSync

yarn add browser-sync --dev
Copy the code
  • Use Browser-sync to keep multiple browsers and devices in sync when building a website, and with Gulp Watch to refresh automatically when modified.

Other plug-ins

  1. Use gulp-Imagemin to compress the image. If the effect is not ideal, use Tinyjpg

  2. Use gulp-rename to rename the file and export it.

  3. Run gulp-delete-file to delete a file

  4. Use gulp-clean to delete the folder

  5. Upload files to the server using gulp-SSH (rarely used)

Gulp and Webpack

After working with Gulp and Webpack, you’ll notice the differences in a number of ways:

  1. In terms of difficulty, Gulp is relatively easy to understand and use. Gulp itself does not have many apis. It just builds a platform for plug-ins, and then the tasks are really accomplished by various Gulp plug-ins. There are various configuration options under entry, output, loader, and plug-in, so you need to carefully check the official documentation and study the project.
  2. In terms of positioning, GULP is task-based. For example, front-end development processes such as compilation, compression, merging and publishing are broken up one by one. Plug-ins are used to automate these processes. The core concept of Webpack is module, which packages various resources into JS modules starting from the entry file, and forms clear dependencies between modules.

The opportunity to use WebPack in real world development is growing as responsive front-end framework languages (React,Vue, Angular) become widely used, The scaffolding tools recommended by these frameworks choose WebPack by default to better compile the technologies used (.jsx,.vue), both mobile applications and background management system page development have mature practices and various open source library support.

The rest of the gulp usage scenario is the traditional JS/JQuery development, this development method does not need special files to compile (.jsx,.vue), can focus on the development process design corresponding gulp tasks to improve the efficiency of development. Front-end business page development is one of the scenarios. With simple functions, rapid iteration and complex DOM manipulation, gulp is a better choice. Another scenario is small program development. The developer tools cannot meet the technical requirements of our development. Complex small program development can use GULP to complete the process tasks, such as compiling LESS, adding MD5 codes, replacing resource paths, etc.

Build a multi-page application using gulp

See the warehouse