Gulp
Features (relative to Grunt) : efficient, easy to use
I. Basic use
- Install gulp dependencies
yarn add gulp -D
Copy the code- Create gulp tool entry file gulpfile.js in the root directory
- Yarn gulp is used to run tasks
// Default task yarn gulp // Common task Yarn gulp task nameCopy the codeGulp Create a composite task
const { series, parallel } = require('gulp')
// Series creates a serial task, while parallel creates a parallel task.
// Series parallel is a function
const task1 = done= > {
setTimeout(() = > {
console.log('task1 executes')
done()
}, 1000);
}
const task2 = done= > {
setTimeout(() = > {
console.log('task2 executes')
done()
}, 1000);
}
const task3 = done= > {
setTimeout(() = > {
console.log('task3 executes')
done()
}, 1000);
}
exports.seriesTask = series(task1, task2, task3) // Execute in sequence
exports.parallelTask = parallel(task1, task2, task3) // Execute simultaneously
Copy the codeIii. Gulp asynchronous tasks
Asynchronous tasks in three ways
const { series, parallel } = require('gulp')
const fs = require('fs')
// Tasks in Gulp are asynchronous tasks
// How to notify Gulp that the current Gulp task is complete if the task in Gulp is asynchronous.
// 1. Notifies GULp that the task is over using the done callback parameter
exports.callback = done= > {
console.log('Callback task executing')
done()
}
exports.callback_err = done= > {
console.log('callback_err')
done()
}
// 1-1. Gulp tasks are error first. If the current task has an error task, subsequent tasks will not be executed.
exports.task = parallel(callback = done= > {
console.log('Callback task executing')
// Throw an error
// done(new Error('hhh'))
}, callback_err = done= > {
console.log('callback_err') // Will not be executed
done()
})
/ / 2. Gulp also support Promise, again through the task function returns a fulfilled | | rejected state Promise objects, also can let Gulp know the current task is over.
// fulfilled
exports.promise = done= > {
console.log('Promise task executing')
return Promise.resolve() // Run the result,gulp knows that the current task is complete
}
// After the rejected state runs, an error is reported, and subsequent tasks will not be executed.
exports.promise_err = done= > {
console.log('Promise_ERR task executing')
return Promise.reject() // Run the result,gulp knows that the current task is complete
}
// Async await Promise syntax candy can also tell Gulp whether the task is finished
// Successful mission
exports.async = async done => {
await console.log('hhhh')}// Failed task
exports.async = async done => {
await console.log('Async task executing')
throw new Error('hhhh')}// 3. When a file stream is read in nodeJS, it returns a file stream object and notifies Gulp that the current task is complete. After receiving the returned file stream object, Gulp checks the onEnd event for the object group.
exports.stream = () = > {
const readStream = fs.createReadStream('./package.json')
return readStream
}
Copy the codeIv. Core working principles of Gulp construction
Whether it’s Gulp or any other automated build tool, the core workings of a build are based on the following steps
const { series, parallel } = require('gulp')
const fs = require('fs')
const { Transform } = require('stream')
// The core Gulp build process
// File compression, CSS, and Babel compilation are all dependent on the following process
// File read = "file processing =" file write
// Example: simulate file compression process
// Compress the package.json file and output it to dist directory.
exports.compression = () = > {
// 1. Read the file stream
const readStream = fs.createReadStream('./package.json')
// Create a write stream
const writeStream = fs.createWriteStream('./dist/package.js')
// 2. Use the Stream module Transform to process the file Stream
const transform = new Transform({
transform(chunk, encoding, callback) {
// Chunk is the content of the stream read in Buffer format
console.log(chunk, 'Buffer')
// Convert the byte stream to string
let input = chunk.toString()
console.log(input)
// Convert the content to the desired output
const output = input.replace(/\s+/g.' ')
// Pass the result through the callback function
// The first argument is the error object and the second is the output
callback(null, output)
}
})
// 3. Write the content
readStream.pipe(transform).pipe(writeStream)
return readStream
}
Copy the codeResults:
Gulp file operation API
1. Nodejs readfile/fs module in the difference between the writeFile and createReadStream/createWriteStream
The readFile /writeFile operation reads the contents of a file directly into the memory at one time and then writes them to the memory. Therefore, there is no pressure for small files. If the content is video, audio and other binary files, the volume of G is normal, this time if the use of direct reading into memory is not good, the operating system for each application allocated memory resources are limited, read too large files will lead to memory burst. CreateReadStream/createWriteStream is in the form of file stream to read and write, read a paragraph, write a paragraph, as long as time permits, we can read and write sooner or later.
2. API for file operations
Gulp also provides its own API for manipulating file streams, which is more powerful than nodeJS’s API for manipulating file streams.
const { src, dest } = require('gulp')
console.log(dest, 'dedddd')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')
// API for Gulp file operation
// the SRC method creates a read stream
// The dest method creates a write stream
This can be done directly using third-party plugins, or you can create a transform stream using new transform
// Example: simulate file compression process
// Compress the files such as page. CSS, index. Js and output to dist directory.
// You need to use the gulp-clean-css to compress the file, gulp-rename rename
exports.default = () = > {
// All CSS files can be read directly using wildcards
const readStream = src('./css/*.scss')
readStream
.pipe(cleanCss())
.pipe(rename({ extname: '.min.scss' }))
.pipe(dest('dist'))
return readStream
}
Copy the codeGulp completes automated workflow for web applications
** All plugins in Gulp are functions that return a file conversion stream ** Github address for the following cases github.com/zce/zce-gul…
1. Style build
// Gulp entry file
// Basically all plugins in Gulp are functions that return a file conversion stream
const { src, dest } = require('gulp')
const sass = require('gulp-sass')
// A. Style of the build task
// 2. Install the sASS conversion stream plug-in, gulp-sass
const style = () = > {
// 1. Create a read/write stream for the file
SRC /assets/styles/*.scss; // The base option will keep the file read path like SRC /assets/styles/*.scss, and delete the base when output, creating the output path dist + assets/styles/*.scss
return src('src/assets/styles/*.scss', {base: 'src'})
// The sass conversion stream does not convert files that start with _ (underscore). OutputStyle: 'expanded' is used to configure the expansion of style curly braces
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(dest('dist'))}module.exports = {
style,
}
Copy the code2. Compile the script file
const babel = require('gulp-babel')
// Show only the core code modules
// compile the script
// 2. Install the script conversion flow plug-in,
// The gulp-babel plugin is just a wrapper for the conversion stream. It will invoke the core Babel module to convert files.
// So @babel/core @babel/preset-env needs to be installed
// @babel/core @babel/preset-env difference
// @babel/core is the platform for JS conversions, and it provides the environment for conversions. For real syntax conversions, we need to rely on other Babel plug-ins such as @babel/preset-env
// @babel/preset-env contains the latest ECMASCRIPT syntax features, converting all the new syntax in the code.
const script = () = > {
// 1. Create a file read/write stream
return src('src/assets/scripts/*.js', {base: 'src'})
.pipe(babel({presets: ['@babel/preset-env']}))
.pipe(dest('dist'))}Copy the code3. Compile the page file
Gulp – swig will HTML documents compiled according to the configuration data, and to the following figure of the {{PKG. Name | upper}} and so on
const swig = require('gulp-swig')
// compile the page
// 2. Install gulp-swig to convert the index file
const page = () = > {
// 1. Create read/write streams
// ** Indicates any subdirectory. For example, SRC /**/*.html means to read any HTML file in any subdirectory of the SRC directory
return src('src/*.html', { base: 'src' })
.pipe(swig(require('./swig-data.js')))
.pipe(dest('dist'))}// 4. Combine the CSS, Page and script build tasks.
// With parallel, the packaged tasks do not depend on each other
const compile = parallel(script, page, style)
Copy the codeThe compiled result after running
4. Image and font file conversion
// 5. Image and font icon construction
// 2. Install the gulp-imagemin conversion stream
const image = () = > {
// 1. Create read/write streams
SRC /assets/images/** This path represents all files under SRC /assetes/images/
return src('src/assets/images/**', { base: 'src' })
.pipe(imagemin())
.pipe(dest('dist'))}const font = () = > {
// 1. Create read/write streams
SRC /assets/images/** This path represents all files under SRC /assetes/images/
return src('src/assets/fonts/**', { base: 'src' })
.pipe(imagemin())
.pipe(dest('dist'))}Copy the code5. Other documents and document clearance
// vi. Public files are packaged into dist directory && delete dist directory before build
const extra = () = > {
// 1. Create read/write streams
return src('public/**', {base: 'public'})
.pipe(dest('dist'))}// Delete the task
const deleteDist = async() = > {return await del('dist')}// Optimize the build task
const build = series(deleteDist, parallel(extra, compile))
module.exports = {
build,
}
Copy the code6. Gulp automatically loads plug-ins
As the build task becomes more complex and the number of plug-ins used becomes more repetitive, you can use gulp-load-plugins to automatically load plug-in names that start with gulp-.
How the plug-in works:
- This method will scan package.json and give the package name beginning with gulp- to the automatic import, and return an object that contains the following
Plug-ins.
- If you take sass as an example, it’s {sass: sass}
- The important thing to note is that if the plugins are named gulp-load-plugins, the plugins in the object are {loadPlugins: loadPlugins}
Code:
// Automatic loading of plug-ins
// 1. A reference to a plug-in is a method
const autoLoadPlugins = require('gulp-load-plugins')
// 2. Call this method to get an object containing all plug-ins
const plugins = autoLoadPlugins()
Copy the codeReplace the previous plug-in name
7. Hot update development server
With the browser-sync plugin we can get a server with hot updates
For details about browser-sync configurations, see the official website
1. Perform basic configurations
// 8, hot update development server
// 1. After the plug-in is introduced, call browserSync.create() to create a server
const bs = browserSync.create()
// 2. Create a task
const serve = () = > {
// Initialize the web server configuration
bs.init({
server: {
// The root directory of the website
baseDir: 'dist'
// The portal file or home page
index: 'index.html' // The default value is index.html}})}Copy the code// 启动服务器
yarn gulp serve
Copy the codeThe website will automatically open
2. Proxy the request resource to node_modules in the current directory
The requested bootstrap.css did not find any style resources
const serve = () = > {
// Initialize the web server configuration
bs.init({
server: {
// The root directory of the website
baseDir: 'dist'.// For routers, see /node_modules.... The requested resource is looked up from node_modules relative to the current working directory.
routes: {
'/node_modules': 'node_modules'}}})}Copy the code
3. Hot update
Hot updates are implemented through the files configuration
const serve = () = > {
// Initialize the web server configuration
bs.init({
server: {
// The root directory of the website
baseDir: 'dist'.index: 'index.html'.// For routers, see /node_modules.... The requested resource is looked up from node_modules relative to the current working directory.
routes: {
'/node_modules': 'node_modules'}},// Browsersync can listen to files at work.
// Type: Array | String
files: 'dist/**'})}Copy the code
4. Listen to the SRC file
Gulp watch() watch() watch
- The first parameter to listen on a path string | array
- Options see official website
- task
const { watch } = require('gulp')
const serve = () = > {
// Listen for resource changes in SRC and run tasks relative to them
watch('src/assets/styles/*.scss', style)
watch('src/assets/scripts/*.js', script)
watch('src/*.html', page)
watch('src/assets/images/**', image)
watch('src/assets/fonts/**', font)
watch('public/**', extra)
// Initialize the web server configuration
bs.init({
server: {
// The root directory of the website
baseDir: 'dist'.index: 'index.html'.// For routers, see /node_modules.... The requested resource is looked up from node_modules relative to the current working directory.
routes: {
'/node_modules': 'node_modules'}},// Browsersync can listen to files at work.
// Type: Array | String
files: 'dist/**'})}Copy the code
8. Optimization of build tasks
step1 
Ps: The following is to understand the knowledge of a variety of hot update implementations. Instead of using browserAsync’s files to listen for all files in the dist directory, you can use gulp’s watch method to listen for changes in the SRC file and then perform the packaging task. Finally, the reload method provided by browserAsync is called to notify all browsers that the relevant files have been changed, either causing the browser to refresh or injecting the files to update the changes in real time.
It is written as follows:
Useref consolidates all dependent files in the HTML type
1. Basic use
Gulp-useref combines multiple CSS and JS references to HTML, reducing the number of dependent files and thus reducing the number of browser requests. Gulp-useref uses the comments to find the HTML blocks that need to be merged and compressed, and then merges all the files in the blocks. Only combine CSS or JS, not compress CSS and JS resources.
Such as: Below jquery. Js, popper. Js, the bootstrap. Js, will this three files to merge for vendor. Js, will combine the file output to assets/scripts/vendor. The js, generate a script tag, The SRC address is the address of the packaged file.
/ / eight. UseRef
const useRef = () = > {
return src('dist/*.html', { base: 'dist' })
// searchPath relative to the current file, to find build comments and endBuild comments wrapped resources
// Where can I find the resources to be merged
.pipe(plugins.useref({ searchPath: ['dist'.'/'] }))
.pipe(dest('dist'))}Copy the code
2. Compress the CSS, JS and HTML files after packaging
1. Basic implementation
HTML file => gulp-htmlmin js => gulp-uglify CSS => gulp-clean-css => gulp-if
const useRef = () = > {
return src('dist/*.html', { base: 'dist' })
// searchPath relative to the current file, to find build comments and endBuild comments wrapped resources
// Where can I find the resources to be merged
.pipe(plugins.useref({ searchPath: ['dist'.'/']}))// 1. File compression
// The useref plugin is not capable of compressing HTML, CSS, js, etc. It will need to be compressing when the project goes live.
// Import the plug-in transformation stream to process the file HTML, CSS, JS
// Because the three types of files require different types of operations, you can use gulp-if to perform different conversion streams for different files
// The first parameter of the gulp-if plug-in matches the re of the file path
.pipe(plugins.if(/\.js$/, plugins.uglify()))
// htmlmin To collapse the newline, pass in the configuration collapseWhitespace: true, and in the JS compression of the HTML file minifyCSS, minifyJS respectively
.pipe(plugins.if(/\.html/, plugins.htmlmin({ collapseWhitespace: true.minifyCSS: true.minifyJS: true })))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
.pipe(dest('dist'))}Copy the code
2. Problems encountered
After the transformation, the main.css content is empty.
The reason is that the I/O operation using byte stream is read a section => file conversion => write a section, read a section again => file conversion => write a section, so that the read and write are in the same dist directory, and there will be conflicts. In this case, we only need to change the output directory into a temporary TEMP file to solve the problem.
Optimize the build process
The compressed file is only used during production and is exported under dist file. The sass file, the JS file that needs to be Babel converted and we put it under the temp file. For details about other temp tasks that need to be modified, see Gitee
Encapsulate automated build workflows
1. Why encapsulate an automated build workflow?
Because projects of the same type share roughly the same amount of automated build work, encapsulating the automated build flow is better than copying code if you want to reuse it. For example, if the workflow is used in 10 projects, and the configuration changes are caused by the gulp plug-in update, you need to change the build tasks for the 10 projects. For now in the learning stage of me, encapsulation workflow to write demo will be very convenient.
2. How to encapsulate an automated build workflow?
1. Basic implementation idea
- We abstracted the gulP workflow we implemented and encapsulated it into an NPM package
- Then install the package with the project we need to use and import the gulpFile file with the extracted workflow.
- Simply put: Workflow = Gulp + gulpFile file
PS: The picture shows the workflow that has not been published to the NPM. In the local test, yarn link is used.
2. Concrete implementation
For some write-dead configurations, we can pass them in as configuration parameters for using the project.If we do not abstract the following./swig-data.js, we will not get it when we use the encapsulated workflow, so we will report an error.
The paths of the workflow are abstracted into configurationsEach project’s path is different, and we need to abstract its path configuration into a configuration.
3. Packing CLI
- Every time you need to create gulpfile.js and introduce the encapsulated gulp task as the entry file for gulp work, it is too troublesome. What should you do?
The gulp command provides command-line arguments:
- –gulpfile Entry file address
- — CWD run directory (where the task runs)
Run the reborn
In the bin file, run the gulp-cli command. For details, see how to write the gulp package.
Package gulp CLI commands
#! What does /usr/bin/env node choose to run scripts with
/ / 1.! /usr/bin/node tells the operating system to call the node interpreter under /usr/bin when the script is executed. Write the dead node path
/ / 2.! The /usr/bin/env node is used in case the operating system user does not have the node installed in the default /usr/bin path.
// When the system sees this line, it first looks for the node installation path in the env setting, and then calls the interpreter program in that path to complete the operation. Node will go to environment Settings and look for the node directory
// The require.resolve method concatenates an absolute path based on the arguments passed.
// This method checks whether the path exists and throws an exception if it does not
Argv takes the command-line arguments and returns an array
// 1. In this case, we need to specify the working directory of gulp-cli, namely -- CWD parameter, and the path of gulp-file file --gulpfile
process.argv.push('--cwd')
process.argv.push(process.cwd())
process.argv.push('--gulpfile')
process.argv.push(require.resolve('.. /lib/index.js'))
require('gulp-cli') ();Copy the code
3. Publish to the NPM repository
One thing to note before publishing is that you need to configure the files field in the package.json file, which files you want to publish. See the configuration below