Hand in hand 🧑🤝🧑 Don’t worry about learning Gulp

“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Preface 🤺

• Recently in build own component library, inside want to useGulpThe styles are packaged separately for the on-demand introduction of 🏇
• Of course withWebpackConfiguring plug-ins is also possible, just as a refresherGulp!
• aboutGulpandWebpackRefer to my previous article:Gulp and WebPack? ✔ ️
• Because this article is relatively basic, the big guy can directly detour 😊, this article is intended to record the process of consolidating knowledge and using 🙆♂️

Hands-on 🤹 came ️

Create a project 🧱

• Execute the following commands separately before everything starts to make sure your computer is installednodeandnpm

node --version
npm --version
Copy the code

• If no, see Installing Node.js and Configuring the Environment
• In the local empty foldergulpBeginCreate agulpfile.jsemptyjsfile

mkdir gulpBegin
cd gulpBegin
echo test>gulpfile.js
Copy the code

• And then we’re going to do thisgulpfile.jsThe file defines usgulpThe task

Gulp depends on installation 🏘️

• Automatically createdpackage.jsonPress enter (used to store configuration information and version number)

npm init
Copy the code

• The installationgulpCommand line command

npm install -g gulp
Copy the code

• The installationgulpAnd writepackage.jsonFile dependencies

npm install --save-dev gulp
Copy the code

• The directory should look like this

GlupBegin ├─ gulpfile.js ├─ node_modules ├─ package-lock.json ├─ package.jsonCopy the code

Gulp use 🛀

Gulp allows you to use your existing JavaScript knowledge to write gulpFiles, or use your experience with GulpFiles to write normal JavaScript code. While Gulp provides some utilities to simplify file system and command-line operations, the rest of the code you write is pure JavaScript code.

• According to the websitegulpCan be usedJavaScript Code to write, let’s write the first task

Exporting tasks 🥽

• The way to define a build task is by exporting the function members

/* gulpfile.js */ function gulpFun() {console.log('hi gulp')} export.default =gulpFun // Export a default task memberCopy the code

• ingulpfile.jsCommand line of the directory where the cli is locatedgulpCan be

• In the latestgulp“, it cancelled the synchronous task mode, and agreed that each of our tasks must be asynchronous tasks. When our tasks are completed, we need to call the callback function to identify the completion of this task
• If the task is a named task, you need to execute it on the command line interfacegulp+The name of the task

/* gulpfile.js */ function gulpFun(cb) {console.log('hi gulp') cb()} export.task1 =gulpFun // Export a task1 memberCopy the code

Composite tasks ⚔️

• Gulp provides two powerful combinative approaches to situations where there are multiple independent tasksseries() 和 parallel()
• series()It will let the tasks go one by one

/* gulpfile.js */ const { series } = require('gulp'); Function gulpFun(cb) {// task 1 console.log('hi ') cb()} function gulpFun2(cb) {// task 2 console.log('hi ') cb()} Exports. default= Series (gulpFun,gulpFun2) // Export a default memberCopy the code

• parallel()It will synchronize the tasks

/* gulpfile.js */ const { parallel } = require('gulp'); Function gulpFun(cb) {// task 1 console.log('hi ') cb()} function gulpFun2(cb) {// task 2 console.log('hi ') cb()} Exports. default=parallel(gulpFun,gulpFun2) // Export a default memberCopy the code

You’ve already learned the basics of gulp, but the whole point of using gulp is to process files and reduce the amount of time we waste, so we need to use the GULp API to do it

API 🍻 gulp

• gulptheApiThere are a lot of but commonly used only a few, the rest of the useful to go to the document to find it

• The build process is mostly about pulling filesreadCome out and do someOperation transformationPut themNext placeforprocessingAt the end of the processing of the documentswriteTo a designated place
• The whole process is sequential and step by step like a pipe, so we can use it in the task.pipe(write to stream)To achieve data writing

src()

• Create a stream to read objects, which you can use as an entry to this file

dest()

• Create a stream for writing objects to the file system

For example

• Create one in the folderscssFile testing

/* gulpfile.js */
const { src,dest,series } = require('gulp');
function gulpFun(cb) {
  src('./styles/text.scss')
  .pipe(dest('./lib/styles'))
  cb()
}
exports.default=series(gulpFun) 
Copy the code

• rungulpAfter that, the directory structure will look like this

GlupBegin ├─ gulpfile.js ├─ node_modules ├─ lib │ ├─ styles │ ├─ text.scss ├─ package-lock Styles └ ─ text. SCSSCopy the code

• You can findgulpWhen reading thestyles/text.scssAfter the./lib/stylesThe file is automatically generated, which is the read and write stream

The gulp plug-in works with 🥂

• Of course we have to deal with files and not just transfer files like this, we have to convert our files for exampleCompress CSS.Compression js,rename,CSS background image generates Sprite diagramWait, this time you need to use some plug-ins to assist.
• ingulpThere are also many plug-ins available in the official website, and you can visit them if you need to find themwebsite
• Here are a few plugins to help build what I said abovecssStyle to package
• We assume that thestylesThere are three in the directoryscssfile

Styles ├─ button.scss ├─ icon.scss ├─ indexCopy the code

• inindex.scssIn theimportThe above two SCSS styles

/* index.scss */
@import "button";
@import "icon";
Copy the code

• Next we just need to packindex.scssYou can import the packaged file somewhere else
• I’m using these four plugins, all of which have to be innpmDownload to copy directly to for easy Postingpackage.jsonperformnpm installYou can

"DevDependencies" : {" gulp ":" ^ 4.0.2 ", "gulp - autoprefixer" : "^ 7.0.0", "gulp - clean - CSS" : "^ 4.2.0", "gulp - rename" : "^ 1.4.0", "gulp - sass" : "^ 4.0.2"}Copy the code

• ingulpfile.jsWrite the following code

/* gulpfile.js */ const { src,dest,series } = require('gulp'); const cleanCSS = require('gulp-clean-css'); const sass = require('gulp-sass'); const rename = require('gulp-rename'); const autoprefixer = require('gulp-autoprefixer'); Function gulpFun(cb) {SRC ('./styles/index.scss').pipe(sass()) // autoprefixer()) Pipe (cleanCSS()) // Compress the CSS file, } export.default =series(gulpFun).pipe(rename('xl-ui.css')).pipe(dest('./lib/styles'))Copy the code

• rungulpIt can be packed in./lib/stylesseexl-ui.cssfile
• Simply put, use the documents you need to deal withsrc()Read and passThe introduction ofA variety ofThe plug-inTo carry outTo deal withthroughpipeTo do the pipe connection, let the whole processExecute in sequenceWe just need to give it what it needs to do in each stepSpecification okAnd then after that,There is no need to do repetitive tedious operationsthe
• And then in addition to packingindex.scssAfter I also want to put each individual componentscssWhat about packing?
• That’s what you do when you pack one, and that’s what you do when you pack two or three, and we just have to define the tasks that he’s going to do
• Create a component.json file to store the files we want to package

/* component.json */
{
  "button": "./styles/button.scss",
  "icon": "./styles/icon.scss"
}
Copy the code

• ingulpfile.jsWrite the following code

/* gulpfile.js */ const { src,dest,series } = require('gulp'); const cleanCSS = require('gulp-clean-css'); const sass = require('gulp-sass'); const rename = require('gulp-rename'); const autoprefixer = require('gulp-autoprefixer'); const components = require('./component.json') function gulpFun(cb) { src('./styles/index.scss') .pipe(sass()) Pipe (autoprefixer()) // Automatically process the browser prefixes according to the browser version to make CSS compatible. Pipe (cleanCSS()) // Compress the CSS file, Rename ('xl-ui.css')).pipe(dest('./lib/styles')) // write to this directory cb()} // pack a separate CSS file function GulpFun2 (cb) {object.keys (components).foreach (compName => {SRC ('./styles/${compName}.scss ') // Traverse the SCSS file to be converted Pipe (sass()) // convert sass to CSS. Pipe (autoprefixer()) // Automatically process the browser prefixes according to the browser version to make CSS compatible. Pipe (cleanCSS()) // compress the CSS file, Reduce the file size. The pipe (rename (` ${compName}. CSS `)) / / to file renaming, pipe (dest (. / lib/styles')); }) cb()} exports.default=series(gulpFun,gulpFun2)Copy the code

• rungulpIt can be packed in./lib/stylesseexl-ui.cssFiles and separate packagescssfile

GlupBegin ├─ node_modules ├─ component.json ├─ gulpfile.js ├─ lib │ ├─ styles │ ├─ button.css │ ├─ icon Xl-ui.css ├─ package-lock. ├─ package.json ├─ styles ├─ button.scss ├─ icon.scss ├─ indexCopy the code

• After we unpacklibFoldercssThe file finds that each is indeed zipped and renamed separately
• That’ll take care of our paperwork! Isn’t that convenient! After we set a list of tasks that need to be done, the next time we have a document that needs to be packaged, we simply execute a simple sentencegulpCommand can be

Put it at the end 👋

• What this article says above is only to usegulpPackage styles, if any, for a variety of modularjsWe still use it when we refer to each otherwebpackLet’s deal with it. After allwebpackFocusing on modular packaging, all files will be processed into a unifiedjsfile
• forgulpThere are also a lot of details if you are interested in you can go to the official website document to check, I believe you can understand the smart
• If you think this article is helpful to your words might as well support yo ~~😛

Past highlights 🌅

Basic configuration and packaging of Webpack with an introduction (I) ⚡️

Basic configuration and packaging of Webpack with an introduction (ii) 📦

Gulp and WebPack? ✔ ️

For convenience, I changed someone else’s wheel 😅