GULP Usage Guide (2) Common apis

This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Common GULP apis

• We’re going to learn some firstgulpThe commonly used API
• Because we’re going to use these apis togulpfile.jsThe configuration is packaged in the file
• These apis are the capabilities we get after we install the project dependencies

1. gulp.task()

• This method is used to create tasks

• Our configuration file is actually writing tasks one by one

• This is done by performing these tasks on the command line

• Grammar:

  // gulp.task(' task name ', function () {}) // Create a task to package HTML files gulp.task('heml', function () {// write the operation to package HTML files})Copy the code

  • In the future when we executehtmlFor this task, you can puthtmlThe file is packaged

2. gulp.src()

3. gulp.pipe()

• It’s a way to help us do things

• We also call this the pipe function

• That’s the pipe function that helps us compress HTML files

• Grammar:

  // gulp.pipe(htmlmin()) // execute the compressed HTML file.Copy the code

  • When the above code is executed, it willhtmlThe file is compressed

4. gulp.dest()

5. gulp.watch()

• Used to monitor files

• Once the monitored file changes, the task you specified will be performed

• Grammar:

  Gulp.watch ('./ SRC /pages/*.html', HTML) gulp.watch('./ SRC /pages/*.html', HTML)Copy the code

  • whenpagesAny one of themhtmlWhen the file is changed, it is automatically executedhtmlThe task is packaged again

6. gulp.series()

7. gulp.parallel()

• Used to execute tasks in parallel

• You can also pass more than one task name and it will start executing at the same time

• Grammar:

  // gulp.parallel(task 1, task 2,...) Gulp.parallel (HTML, CSS, js)Copy the code

  • He’ll get it readyhtml / css / jsAll three tasks start at the same time

Gulp configuration

Create a task to package CSS

• The simplest thing is to remove the whitespace from the CSS file

• We can’t delete them one by one, nor can we write a regular to replace them

  • Because one is too much trouble, and one is that it’s hard to write the re ourselves

• So we need a third party to do it for us

• The dependency is downloaded directly from the project

  • $ npm install --save-dev gulp-cssmin

• Let’s start with the configuration

  • So let’s write one heregulp 3.x.xThe configuration of the
  • In writing onegulp 4.x.xThe configuration of the
  • Since the configuration of the two versions is different, let’s study both
  • As far as you’re concerned, use one, depending on your version of Gulp

• We just use CSS as an example here

  • The other tasks are the same, just using different third-party packages

gulp 3.x.x

Const gulp = require('gulp') // 2. Const cssmin = require('gulp-cssmin') // create a gulp.task(' CSS ', Function () {return gulp. SRC ('. / SRC/CSS / *. CSS ') / / to the compressed file. The pipe (cssmin ()) / / compression. The pipe (gulp. Dest ('. '/ dist/CSS)) / / Write the result of compression to the dist directory})Copy the code

gulp 4.x.x

• gulp4You don’t need it in theretaskI’m creating the task, so I can just write it as a function

Const gulp = require('gulp') // 2. Const cssmin = require('gulp-cssmin') // A handler for packaging CSS files const cssHandler = () => {return Gulp.src ('./ SRC/CSS /*.css') // Find the CSS file to compress.pipe(cssmin()) // compress.pipe(gulp.dest('./dist/ CSS ')) // write the result to dist directory } // Since this is a function, not a task, we need to export to use module.exports. CSS = cssHandlerCopy the code

• And then you can go to the command line and execute something calledcssThe task
• $ gulp css

Create a monitoring task

gulp 3.x.x

gulp.task('watch', function () {
    gulp.watch('./src/css/*.css', gulp.series('css'))
})
Copy the code

• When you execute thiswatchAfter the task
• So as long as./src/css/*.cssAll of thecssIf the file changes, it will be executed againcssThis task

gulp 4.x.x

Const watchHandler = () => {gulp.watch('./ SRC/CSS /*.css', CSS)} // Export this task module.exports.watch = watchHandlerCopy the code