All repetitive tasks should be automated

Introduction to Automation

The automated build of source code for production code is called the automated build workflow

What it does: It avoids runtime compatibility issues as much as possible, using syntax, specifications, and standards that improve efficiency

Application scenarios: For example, when developing web applications, you can use the latest standards of ECMAScript Next to improve coding efficiency and quality;

Use Sass to enhance the programmability of CSS; Use a template engine to abstract repetitive HTML from a page. Most of these uses are not directly supported by browsers. In this case, automated build tools come in handy — builds convert unsupported features into code that runs directly, increasing coding efficiency.

Core working principle of Gulp construction process

The build process is mostly just reading out the file, doing some transformation, and finally writing it to another location

Gulp is a stream-based build system, and the build process uses the file stream method. The reason is that gulp wants to realize the concept of a build pipeline, which will be relatively uniform in the subsequent extension

The core build process of a normal build task in GULP

Use the underlying Node API to implement this process as follows

Code address is

Gulp file manipulation API+ plugin use

The process for creating a build task through Gulp is as follows:

1. Use the SRC method in gulp to create a read stream

2. Use the conversion flow provided by the plug-in to realize file processing

3. Use the dest method in gulp to create a write stream and write it to the target file

Yarn add gulp-clean-css --dev // This plug-in provides the gulp-rename stream for compressing CSS code. Yarn add gulp-rename --dev // Rename the plug-inCopy the code

Gulp Automated build case – style compilation

Example – Using GULP to automate the build workflow

The first step:

Yarn add gulp --dev // Install gulp dependency yarn add gulp-sass --dev // install gulp-sass plug-in for CSS conversion each plug-in provides basically a function that returns a file conversion streamCopy the code

Step 2: Create gulpfile.js in the root directory

Step 3:

Yarn gulp style //style is the task nameCopy the code

Gulp Automated Build case – Script file compilation task

Yarn add gulp-babel --dev // Install gulp-babel --dev // install gulp-babel --dev // install gulp-babel --dev // preset -- env Plug-ins provided by Babel to complete the transformation can be configured in. BabelrcCopy the code

Gulp Automated Build case – page file compilation task

Yarn add gulp-swig --dev //gulp-swig is used to convert the template engineCopy the code

Gulp Automated Build example – Image and font file conversion

Yarn add gulp-imagemin --dev //gulp-imagemin is an image compression plug-inCopy the code

Gulp Automated Build case – other files and file cleanup

Yarn add del --dev // does not belong to gulp. Del (['dist']) Can delete any file or directory. Yarn gulp build // Execution modeCopy the code

Gulp Automated Build case – automatic loading of plug-ins

Yarn add gulp-load-plugins --dev // This plug-in avoids automatic loading of plug-ins in require modeCopy the code

Gulp Automated Build case – Hot update development server

Yarn add browser-sync --dev // Provides a development server that automatically updates code to the browser after modification. Yarn gulp serve // Perform serve tasksCopy the code

Implementation of all arbitrary files under the dist automatic update browser

Gulp Automated Build case – Listen for changes and build process optimization

Yarn gulp serve // Perform the serve taskCopy the code

Implement modify SRC under all arbitrary file browser automatic update

Build process optimization – The development phase is presented with minimal cost

Do not compress the common part of the picture text style yarn gulp build. Compile bs.init() for developmentCopy the code

Gulp Automated Build case – Useref file reference handling

Yarn add gulp-useref --dev // Compress the other files of the package file. Build a comment, convert it, and generate a new path for the online environmentCopy the code

Perform before

After performing

The following code

Gulp Automated build case – compress HTML CSS JavaScript separately

Yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev // Compress HTML CSS javascript plug-in yarn add gulp-if --dev // Determine the condition plug-in yarn Gulp useref // Run the commandCopy the code

Gulp Automated Build case – Redesign the build process

Use temp as the intermediate directory

Yarn gulp build // Yarn gulp developCopy the code

The Gulp Automated Build Case — supplement

The first:

1. Export the task to gulpfile.js

2. Add the command to the scripts of package.json and run the command in yarn build mode

3. In. Gitignore, ignore the dist Temp folder

Second question: How do you extract the automated build process common to multiple projects

Encapsulation automates the build workflow

Gulp and gulpfile are combined through a module that can then be used to provide an automated build workflow

1. Zce-glup – Pages project is a project that needs to use packaged modules

2. Fjk-pages project is a packaged project with compression function, which needs to be linked to global or NPM for use

From building a repository locally to creating a remote Git address

https://github.com/JinYoMo/fjk-pages git init / / to create local git repository git remote add origin https://github.com/JinYoMo/fjk-pages.git git status git add . git commit -m 'feat:initial commit' git push -u origin master //git push -u origin master -f git pull origin masterCopy the code

Encapsulate automated build workflows — extract gulpfile files into modules

Step 1: Copy gulpfile to lib/index.js

Jk-pages < fJK-Pages > < span style = “box-sizing: border-box! Important; word-wrap: break-word! Important;

Step 3: Link the FJK-Pages module globally

Yarn Link // Run the yarn link "fJK-pages" command in the fJK-pages project. // Run the yarn link "fJk-pages" command in the zCE-glop-pages project to use the FJK-pages module in the ZCE-Glop-pages projectCopy the code

Step 4: Create a pages.config.js file in the zCE-glup-pages project to export the data. During compression, these files will compress the data to the packaged file for display

Yarn build // in zce-glup-pages you can run pages.config.js and get the dataCopy the code

The data in pages.config.js is also available after packaging

Encapsulating automates the build workflow — abstracting the path configuration

Package automates the build workflow – Package Gulp CLI

Bin /fjk.pages. Js is used as the cli entry file

Note: remove the gulpfile.js file in the root directory of the zCE-glup -pages project

Zce-glop-pages project root directory does not need to have gulpfile.js, directly find fjk-pages lib/index.js. These two projects can be connected to fJk-pages project yarn link. The node_modules of the zCE-glup-pages project has the fJK-pages folder

Encapsulating automates the build workflow — publishing and consuming modules

Yarn publish - registry / / https://registry.yarnpkg.com to NPMCopy the code

Use the module to create a new fjk-pages-demo folder containing the pages.config.js file

Yarn init --yes // Generate package.js file yarn add fjk-pages --dev // Install fjk-pages depend on yarn fjk-pages build // Run the build commandCopy the code

Fjk-pages -demo dependency node_modules Fjk-pages dependency bin directory contains the fjk-pages command

The fjk-pages-demo project directory is as follows

Run the yarn fjk-pages build command to package the yarn

Command optimization – Register commands in the scripts of the project package.json

Yarn build // Run the package commandCopy the code

The completion of