使用 grunt 依次连接文件

Question

我是新来的咕噜声 我想使用 grunt 将 java 脚本文件连接到一个文件 我有 6 个 js 文件，但它们需要按某种顺序运行代码而不会出现错误，例如应该首先加载 jquery 但是来自 grunt 的结果文件没有保留这个序列 我尝试了很多方法，例如将它们安排在 src 中或创建多个文件夹，但没有成功

注意 - 当我通过复制和粘贴在一个文件中进行手动连接时，它工作正常 那么是否有任何命令可以使 grunt 以我在 src 中编写的序列中连接这些文件作为示例 这也是我的 gruntfile.js

module.exports = function(grunt) {

  // 1. All configuration goes here
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),




    // 1 - this is contecnate js files call them in one file only
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['src/public/js/jquery.min.js','src/public/js/bootstrap.js','public/js/modernizr.custom.77555.js',
          'public/js/jquery.magnific-popup.js',
     'public/js/jquery.mixitup.min.js','public/js/popup-box.js' ],
        dest: 'dist/1newbuilt.js',
      },
    },



    uglify: {
      build: {
        src: 'dist/1newbuilt.js',
        dest: 'dist/1newbuilt.min.js'
      }
    }


  });

  // end 1 - this is contecnate js files call them in one file only







  // 3. Where we tell Grunt we plan to use this plug-in.
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
  grunt.registerTask('default', ['concat', 'uglify']);

};

我需要以某些顺序连接文件，例如先添加 1.js，然后在其后添加 2.js 所以我按顺序写了文件，但是这种方式也行不通-

Answer 1

如果您想继续使用 grunt-contrib-concat，并手动明确指定您的来源，就像您拥有的那样，它应该可以工作。您看到模块的顺序是什么？您是否删除了 uglify 选项并只使用了 concat 选项？这个 grunt 配置正确地将组合脚本按顺序排列。

module.exports = function(grunt) {
// 1. All configuration goes here
  grunt.initConfig({




    // 1 - this is contecnate js files call them in one file only
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['a.js','b.js'],
        dest: 'built.js',
      },
    }
  });

  // end 1 - this is contecnate js files call them in one file only
// 3. Where we tell Grunt we plan to use this plug-in.
  grunt.loadNpmTasks('grunt-contrib-concat');


  // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
  grunt.registerTask('default', ['concat']);

}

这会产生这样的结果-

(function(){
    console.log("module a");
})();
;(function(){
    console.log("module b");
})();

另外，为了样式，我认为不需要分号分隔符。如果你真的需要在你的 JS 文件中指定依赖顺序，另一条不请自来的建议，你应该转向使用像 RequireJS、Browserify 或 ES6 Modules 这样的模块加载器（使用某种转译器）

Answer 2

您不必编写所有的 JS 文件。只需使用通配符。

concat: {
      js: {
        src: 'src/public/js/*.js',
        dest: 'dest/js/concat.js'
      },

你的小任务

 min: {
      js: {
        src: 'dest/js/concat.js',
        dest: 'dest/js/concat.min.js'
      }
    },