Question

我是咕噜咕噜的新手我想使用grunt将java脚本文件连接到一个文件我有6个js文件，但是它们需要以某种顺序运行代码而不会出现像jquery应该首先加载的错误但是来自grunt的结果文件没有保留这个序列我尝试了很多东西，比如在src中安排它们或者制作多个文件夹但是它不起作用

注意 - 当我通过复制和粘贴在一个文件中进行手动连接时，它可以正常工作所以是否有任何命令使grunt连接这些文件在我在src中编写的secuquence作为示例这也是我的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'
      }
    },

使用grunt按顺序连接文件

2 个答案: