Question

我的目录结构如下所示：

--myapp/
   --client/
      --build/
      --css/
      --js/
          --angular/                         #angular libraries here
             --angular.js
              --angular-resource.js
              --angular-ui-router.js
           --jquery/                          #jquery libraries here
              --jquery.js
      --app.js
      --index.html

   --server/ #All server related files here
   --Gruntfile.js

到目前为止，我的Grunt文件看起来像这样

module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json');
    concat: {
      dist: {
           src: ['client/js/angular/*.*] 
           dest: 'client/build/angular-build.js'
             }

}

});

};

据我所知。没有看到任何简单的grunt文件教程。我正在寻找的输出是一个输出文件中的所有角度库。所有jquery库都在另一个...所有css库中排在第三位。

我如何实现这一目标？

Answer 1

一些事情：

你不知道，但你使用的是grunt-contrib-concat，所以你最好npm install和grunt.loadNpmTasks('grunt-contrib-concat');。
Concat不支持通配符。这很好，因为包含这些文件的顺序很重要。 angular.js

angular-resource.js

我已经包含了一个粗略的模板，说明了你的Gruntfile需要完成的工作，但要知道这不是正确的方法。您应该使用类似bower的内容加载依赖项并单独提供，或使用Browserify或Require.js之类的东西。随着项目的进展，你会看到它的价值。

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json');
    concat: {
        angular: {
            src: [
                'client/js/angular/angular.js',
                'client/js/angular/angular-resource.js',
                'client/js/angular/angular-ui-router.js'
            ]
            dest: 'client/build/angular-build.js'
        },
        jquery: {
            src: ['client/js/jquery/jquery.js']
            dest: 'client/build/jquery-build.js'
        },
        ...
    }
});

grunt.loadNpmTasks('grunt-contrib-concat');
};

为角度应用程序创建一个grunt文件

1 个答案: