This article is part of a series of articles on the development toolset. Click here for more.

1 overview

Task-runner is a tool that automates the organization and execution of tasks. It is used to execute some commands or process files using plug-ins, such as compression, conversion, formatting, etc. The traditional tools include gulp, Grunt, and NPM script.

If we choose a suitable packaging tool, such as WebPack, these packaging tools will override most of the task-builder functionality, and coupled with NPM Script, most scenarios will no longer require other build tools. But these three build tools are described here to give you an idea.

2 grunt and gulp

Currently, gulp is more widely used than Grunt. Gulp is an improvement on the essence of Grunt and can even use its plug-ins. On gulp’s official website, we can see what gulp has done based on Grunt

  • Use the supplied Node.js API instead of being reconfigured as grunt
  • Instead of writing a single task to do multiple things, plug-ins are written to focus on specific functions
  • Instead of printing intermediate files, use in-memory streams before final output of files

The following is a detailed introduction to the usage of both

2.1 grunt

The use of grunt is specified by configuration. The configuration file is gruntfile.js. When grunt is invoked from the command line, the corresponding configuration file is read

  • The Wrapper function, the entire exported function
  • Project and task configuration, usinggrunt.initConfigInitialize a configuration. The configuration object will be passed in subsequent tasksgrunt.configaccess
  • Load plug-ins and tasks. Common tasks are encapsulated in plug-ins and can be usedgrunt.loadNpmTasksLoad use.
  • Customize plug-ins and tasks. You can customize the default task, either the task encapsulated by the plug-in in the following example, or a custom task, such as
module.exports = function(grunt) { // A very basic default task. grunt.registerTask('default', 'Log some stuff.', function() { grunt.log.write('Logging some stuff... ').ok(); }); };Copy the code

The complete configuration file is shown as follows

module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plug-in containing the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // List of tasks to be executed by default. grunt.registerTask('default', ['uglify']); };Copy the code

Please refer to the official documentation for more information

2.2 gulp

Using gulpfile.js as a configuration file, which contains executed tasks, each task is an asynchronous JS function, Receives an Error first callback or returns a stream, promise, Event emiter, Child process, or Observable. Tasks can be private and public. The former can only be invoked inside the configuration file, while the latter can be invoked outside the configuration file. Multiple tasks can be combined using series() and parallel(), with the former executed sequentially and the latter concurrently

const { series } = require('gulp');

// The `clean` function is not exported so it can be considered a private task.
// It can still be used within the `series()` composition.
function clean(cb) {
  // body omitted
  cb();
}

// The `build` function is exported so it is public and can be run with the `gulp` command.
// It can also be used within the `series()` composition.
function build(cb) {
  // body omitted
  cb();
}

exports.build = build;
exports.default = series(clean, build);
Copy the code

When working with a file. Use pipe() between the SRC () and dest() methods to change the contents of the file, at which point a plug-in can be used

const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    // The gulp-uglify plugin won't update the filename
    .pipe(uglify())
    // So use gulp-rename to change the extension
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}
Copy the code

3. npm srcipt

We are familiar with grunt and GULp. They have the following problems

  • Requires plug-in processing, and the ecology is less complete than the packages required by NPM Script
  • The task build syntax is too cumbersome to debug

Coupled with the popularity of NPM, the combination of NPM Script + packaging tools now has an obvious advantage over the above tools. Now for a discussion of NPM Script features, refer to the official documentation. NPM script scripts are located in the scripts field of package.json.

The commands are executed using NPM run, and the corresponding premyScript and postmyScript are executed successively, for example

{
  "scripts": {
    "precompress": "{{ executes BEFORE the `compress` script }}",
    "compress": "{{ run command to compress files }}",
    "postcompress": "{{ executes AFTER `compress` script }}"
  }
}
Copy the code

You can also use && to execute multiple commands at once or to call each other

"scripts": {
  ...
  "build:images": "npm run imagemin && npm run icons",
  "build:all": "npm run build:css && npm run build:js && npm run build:images",
}
Copy the code

End and spend