javascript - 如何在后台同时运行多个 Grunt 脚本？

Question

grunt.registerTask('dev', ['browserSync:dev', 'webpack', 'watch']);

这是我在开发时需要运行的 Grunt-Dev 脚本。它运行做三件事。

1) 观察 SCSS 文件的变化，然后将它们编译成 CSS (watch + sass)

2) 使用内置重新加载的 BrowserSync 启动 liveserver

3) 运行一个 webpack 脚本来监视 js 文件的变化，并在有变化时将它们重新编译成 bundle.js

所有这些工作，但是，我不想每次都打开三个命令提示符并且必须输入每个命令。相反，让它们都使用一个 grunt 脚本运行是目标

它的 75% 工作。我可以同时使用 SASS/watch + BrowserSync

grunt.registerTask('dev', ['browserSync:dev', 'watch']);

这是因为 BrowserSync 有一个watchtask: true选项，这意味着它将在“后台”运行。但是添加第三个脚本（webpack），我需要 watch 或 webpack 才能有这样的选项。因为现在，无论我将 webpack 脚本放在哪里，它或监视脚本都会充当其他脚本运行的墙

这是完整的 Grunt 脚本供参考

 webpack: {
      myconfig: function() {
        return {
          entry: './app/src/js/App.jsx',
          output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'app/src')
          },
          watch: true,
          mode: 'production',
          devtool: "source-map"
        };
      }
    },

    browserSync: {
      dev : {
        bsFiles: {
          src : ['app/**/*', '!app/src/js/*.js', '!**/*.scss']
        },
        options: {
          server: {
            baseDir: "./app"
          },
          watchTask: true,
          notify: false
        }
      }
    },

    sass: {
      dist: {
        options:{
        },
        files: [{
          expand: true,
          cwd: 'app/scss',
          src: ['theme.scss'],
          dest: 'app/',
          ext: '.css'
        }]
      }
    },

    watch: {
      scripts: {
        files: '**/*.scss',
        tasks: ['sass'],
        options: {
          spawn: false
        },
      },
    },

标签： javascriptwebpackgruntjs