gulp automation tool

gulp usage process

  1. Install node and NPM (you can use node from the command line)   - v and npm -v to see if node and NPM are installed)
  2. Install gulp cli command line tool (Global installation)     npm i gulp-cli -g    - G stands for global installation)
  3. Create project directory
  4. Use npm init in the project directory to create the package.json file (package-lock.json is used to lock the version number because the package may be updated)
  5. Install gulp locally as a development dependency
  6. Create the gulpfile.js file in the project directory
  7. Write gulp task (gulp task is a function)
  8. Execute the written gulp task (gulp) in the command line tool   js or gulp)

Write and execute gulp tasks

  1. Get gulp
  2. Create task
  3. Export task
  4. Perform tasks

       

// 1.  Get gulp
const gulp = require('gulp');

// 2. To create a file copy task, you need to use the method provided by gulp
const { src,dest } = gulp
function copy () {
    //Using the deconstructed src and dest, src is followed by the file to be read *. html represents all html files in the file directory 
    //piece
    return src('src/pages/*.html').pipe(dest('dist/pages'))
}

// 3. Export gulp task
exports.copy = copy;

// 4. Use the exported gulp task on the command line with gulp copy


//After using the copy task on the command line, a dist directory will be created, and the copied files will be stored in the pages file under the dist folder

gulp task

  Every time we perform a task, we will always succeed after a period of time, but do we need to inform gulp after we complete the task?

  1. When we only perform one task, we do not notify gulp of the completion of the task

       

2. When we need to perform multiple tasks, if we still don't inform gulp whether the tasks have been completed, the following tasks can't be performed normally!

  So when we need to execute multiple tasks at the same time, we have to notify gulp that the task is completed after each task is executed!

Code snippet

// 1. Introduce gulp
const gulp = require('gulp');

// Introducing del
const del = require('del');
// Deconstruct series from gulp
const { series, src,dest } = require('gulp');
// Create a task named clean to clear dist
function clean () {
    del(['dist']);
    // cb();
}

// 2. Write gulp task named a
function a (callbak){
    console.log('Start task a');
    setTimeout(() => {
        console.log('task a completion of enforcement');
        callbak()
    }, 1000);
};
function b (callbak) {
    console.log('Start task b');
    setTimeout(() => {
        console.log('task b Execution complete');
        callbak()
    }, 2000);
}
// 3. Export task a
exports.a=a;
// series is used to execute tasks in turn. The clean task is ahead of task a, so execute the clean task first, and then execute task a after the clean task is completed
exports.default = series(a,b);
// exports.default exports the default task of gulp, which can be used by executing gulp on the command line, so it is called the default task


// Create a copy task
function copy() {
    return src('src/pages/*.html').pipe(dest('dist/pages'))
};
exports.copy = copy;
  1.   To sum up, whether to notify a single task or not will not have an impact, but if it is multiple tasks, gulp must be notified of the completion of task execution, otherwise it cannot continue to execute the next task! Of course, promise can also be used because it has the functions of resolve and reject!

Public and private tasks

  1. Open task: the exported task can be called by gulp command
  2. Private tasks: tasks that are not exported are only used internally. They are usually used consistently as part of the combination of series and paralle l
  3. series() executes tasks sequentially and parallel () executes tasks simultaneously. Both exist in gulp. You can use the method of deconstruction and assignment to deconstruct from gulp for use!

gulp.task

  1. In previous versions of gulp, the gulp.task method was used to register functions as tasks
  2. Although the API is still available, the main registration mechanism has become exports

Glob

  1. Glob is the path matching symbol -- it feels a little regular!
  2. glob is a string composed of ordinary or special characters (*, * *,!) and separator (/), which is used to match the file path!
  3.   Return SRC ('src / * * / *. HTML '). Pipe (DeST ('dist /') -- glob looks like this

Del

  The cleanup task in gulp depends on the del package, which is not related to gulp

  To create a cleanup task, we need to install a del package (npm i --D del)

  -- D is to install the del package into the production dependency

  

After the installation, we need to use require to introduce the Del package -- const del = require('del ');

Create a clean task after importing

function clean () {

    del(['dist'])

}

After the creation, we export the task and use it

exports.clean=clean;

//  Import the installed del package
const del = require('del');
// Create a cleanup task named clean
function clean () {
    del(['dist'])
}
// Export clean task
exports.clean=clean;

  Plug ins in Gulp

  1. gulp plug-in is used to complete some specific work, such as compiling es6 code into es5 code.
  2. Generally, the. pipe method is used to place the plug-in between src() and dest(), process the stream stream, and process the file between input and output
  3. You can search for plug-ins on gulp's official website      https://gulpjs.com/plugins/

      Take babel as an example

     

const { series,src,dest } = require('gulp');
const del = require('del');
const babel = require('gulp-babel');

// Clear dist directory
function clean (cb) {
    del(['dist']);
    cb()
};


// Processing js
function js () {
    return src('src/js/*.js').pipe(babel({
        presets: ['@babel/env']
    })).pipe(dest('dist/js'))
};
exports.js=js;
exports.clean=clean;

After searching gulp Babel, you will be prompted

  1. # Babel 7
    $ npm install --save-dev gulp-babel @babel/core @babel/preset-env
    
    # Babel 6
    $ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

    2. 

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist'))
);

File monitoring

  1. File monitoring is to associate the files matched through the glob with the task. If any files are modified, the associated task will be executed
  2. const { series,parallel,src,dest,watch } = require('gulp');
    const del = require('del'); 
    const babel = require('gulp-babel');
    
    
    // Clear dist directory
    function clean () {
        return del(['dist'])
    };
    
    // Processing js
    function js () {
        return src('src/js/*.js').pipe(babel({
            presets: ['@babel/env']
        })).pipe(dest('dist/js'));
    };
    
    // Monitoring js
    function watchJs () {
        watch('src/js/*.js',js)
    }
    exports.default=series(clean,js,watchJs)

    When the file in glob changes, the associated task js is triggered.

After we start monitoring, if we want to quit monitoring, we need ctrl+c to stop the watch!  

gulp partial plug-ins

    html plugin

  1.       Gulp htmlmin ---- used to compress html files
  2.       Gulp file include ---- used to introduce code fragments (prefix custom prefix and basepath reference path need to be configured for parameter configuration)

      css plug-in

  1. Sass and gulp sass convert scss to css files

      js plug-in

  1. jsmin
  2. babel

Tags: npm gulp

Posted on Tue, 30 Nov 2021 08:33:31 -0500 by FFFF