将Gulp任务迁移至Grunt的可行方案及实操咨询

问题背景 #

项目包含一个JavaScript文件夹，内有7个定义Gulp任务的文件，需迁移至Grunt。直接将gulp.task替换为grunt.registerTask时出现报错，对迁移操作无头绪，同时想了解能否从其他JS文件运行Grunt任务。

示例Gulp任务代码 #

gulp.task('task1', function () {
    let local = glob.sync('./dist/*', {
        ignore: ['./dist/file1.ico', './dist/file2.txt']
    });
    if (local.length) shelljs.rm('-rf', local);
    shelljs.rm('-rf', ['./private', './source/files']);
    const json = glob.sync('./input.json');
    shelljs.rm('-rf', json);
});

gulp.task('task2', function () {
    shelljs.mkdir('-p', './source/files');
    shelljs.cp('-r', './source/*', './source/files');
});

gulp.task('task6', ['task1', 'task2', 'task5']);

当前Gruntfile代码 #

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          }
        }
      });
    grunt.registerTask('default', 'Log some stuff.', function() {
        grunt.log.write('Logging some stuff...').ok();
      });
 
};

迁移步骤 #

1. 安装必要依赖 #

先安装Grunt核心及任务中用到的工具包：

npm install grunt glob shelljs load-grunt-tasks --save-dev

2. 迁移单个任务到Grunt #

Grunt自定义任务写法与Gulp类似，同步任务可直接迁移，异步任务需注意调用this.async()处理。修改Gruntfile如下：

module.exports = function (grunt) {
    // 引入依赖工具包
    const glob = require('glob');
    const shelljs = require('shelljs');

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          }
        }
      });

    // 迁移task1
    grunt.registerTask('task1', '清理指定文件和目录', function() {
        let local = glob.sync('./dist/*', {
            ignore: ['./dist/file1.ico', './dist/file2.txt']
        });
        if (local.length) shelljs.rm('-rf', local);
        shelljs.rm('-rf', ['./private', './source/files']);
        const json = glob.sync('./input.json');
        shelljs.rm('-rf', json);
        grunt.log.ok('task1 执行完成');
    });

    // 迁移task2
    grunt.registerTask('task2', '创建目录并复制文件', function() {
        shelljs.mkdir('-p', './source/files');
        shelljs.cp('-r', './source/*', './source/files');
        grunt.log.ok('task2 执行完成');
    });

    // 迁移组合任务task6
    grunt.registerTask('task6', ['task1', 'task2', 'task5']);

    grunt.registerTask('default', 'Log some stuff.', function() {
        grunt.log.write('Logging some stuff...').ok();
      });
 
};

3. 拆分任务到多个JS文件（对应原7个Gulp任务文件） #

Grunt支持将任务拆分到单独文件，避免Gruntfile过于臃肿：

• 项目根目录创建grunt-tasks文件夹，每个任务单独写一个JS文件，例如grunt-tasks/task1.js：

const glob = require('glob');
const shelljs = require('shelljs');

module.exports = function(grunt) {
    grunt.registerTask('task1', '清理指定文件和目录', function() {
        let local = glob.sync('./dist/*', {
            ignore: ['./dist/file1.ico', './dist/file2.txt']
        });
        if (local.length) shelljs.rm('-rf', local);
        shelljs.rm('-rf', ['./private', './source/files']);
        const json = glob.sync('./input.json');
        shelljs.rm('-rf', json);
        grunt.log.ok('task1 执行完成');
    });
};

• 在Gruntfile中自动加载所有任务文件：

module.exports = function (grunt) {
    // 自动加载grunt-tasks目录下的所有任务文件
    require('load-grunt-tasks')(grunt, {
        pattern: './grunt-tasks/*.js'
    });

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          }
        }
      });

    // 注册组合任务task6
    grunt.registerTask('task6', ['task1', 'task2', 'task5']);

    grunt.registerTask('default', 'Log some stuff.', function() {
        grunt.log.write('Logging some stuff...').ok();
      });
 
};

4. 测试迁移后的任务 #

运行单个任务验证：

grunt task1

运行组合任务验证：

grunt task6

从其他JS文件运行Grunt任务 #

可以通过Grunt API在外部JS文件中触发任务，步骤如下：

1. 创建外部JS文件（例如run-grunt-task.js）：

const grunt = require('grunt');

// 初始化Grunt配置
require('./Gruntfile.js')(grunt);

// 加载所有任务文件
require('load-grunt-tasks')(grunt, {
    pattern: './grunt-tasks/*.js'
});

// 执行指定任务
grunt.tasks(['task1'], function() {
    console.log('任务执行完成');
});

2. 运行该文件：

node run-grunt-task.js

内容的提问来源于stack exchange，提问作者Mahendran V M