2014-01-21 57 views
2

我有两个任务,当我建立与咕噜:咕噜usemin和CONCAT:取文件已在DIST第一,而不是应用程序

第一个任务preprocess:dist那份app/scripts/config.jsdist/scripts/config.js并替换// @echo FOOBAR

然后,usemin,连接所有app/scripts/**/*.jsdist/scripts/application.js。在Gruntfile

生成任务:

grunt.registerTask('build', [ 
    'clean:dist', 
    'preprocess:dist', 
    'useminPrepare', 
    ... 
    'htmlmin' 
    'concat', 
    'usemin' 
] 

我包括脚本index.html

<!-- build:js({.tmp,dist,app}) scripts/application.js --> 
<script src="/scripts/config.js"></script> 
<script src="/scripts/other_file.js"></script> 
<script src="/scripts/yet_another_file.js"></script> 
<!-- endbuild --> 

一切正常,只是在连结文件DIST /脚本/ application.js中,我有config.jsapp/scripts,而不是从dist/scripts

我认为build:js之后的({.tmp,dist,app})用于指定在连接时将文件放在哪里,但config.js仍取自错误的目录(app和not dist)。

所以我最终得到了config.js,// @echo VAR没有被替换。

如何在连接时告诉concat/usemin从dist获取config.js而不是app?


注:一种解决方案是有预处理把一个config.processed.jsapp/scripts,然后包括这个文件,而不是config.js,让我没有改变的方式usemin作品。

但后来我不得不投入的.gitignore config.processed.js和我在我的源文件生成的文件...

我宁愿具有的.tmp或DIST生成此文件。


编辑:我的整个Gruntfile:

// Generated on 2013-10-31 using generator-angular 0.5.1 
'use strict'; 

// # Globbing 
// for performance reasons we're only matching one level down: 
// 'test/spec/{,*/}*.js' 
// use this if you want to recursively match all subfolders: 
// 'test/spec/**/*.js' 

module.exports = function (grunt) { 
    require('time-grunt')(grunt); 
    require('load-grunt-tasks')(grunt); 
    require('time-grunt')(grunt); 

    grunt.loadNpmTasks('grunt-preprocess'); 
    grunt.loadNpmTasks('grunt-include-source'); 

    grunt.initConfig({ 
    yeoman: { 
     // configurable paths 
     app: require('./bower.json').appPath || 'app', 
     dist: 'dist' 
    }, 
    watch: { 
     coffee: { 
     files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'], 
     tasks: ['coffee:dist'] 
     }, 
     coffeeTest: { 
     files: ['test/spec/{,*/}*.coffee'], 
     tasks: ['coffee:test'] 
     }, 
     compass: { 
     files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
     tasks: ['compass:server', 'autoprefixer'] 
     }, 
     styles: { 
     files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 
     tasks: ['copy:styles', 'autoprefixer'] 
     }, 
     livereload: { 
     options: { 
      livereload: '<%= connect.options.livereload %>' 
     }, 
     files: [ 
      '<%= yeoman.app %>/{,*/}*.html', 
      '.tmp/styles/{,*/}*.css', 
      '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', 
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
     ] 
     }, 
     includeSource: { 
     files: ['<%= yeoman.app %>/index.html'], 
     tasks: ['includeSource:server'] 
     } 
    }, 
    autoprefixer: { 
     options: ['last 1 version'], 
     dist: { 
     files: [ 
      { 
      expand: true, 
      cwd: '.tmp/styles/', 
      src: '{,*/}*.css', 
      dest: '.tmp/styles/' 
      } 
     ] 
     } 
    }, 
    connect: { 
     options: { 
     port: 8080, 
     // Change this to '0.0.0.0' to access the server from outside. 
     hostname: '0.0.0.0', 
     livereload: 35729, 
     // Modrewrite rule, connect.static(path) for each path in target's base 
     middleware: function (connect, options) { 
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base; 
      return [require('connect-modrewrite')(['!(\\..+)$/[L]'])].concat(
      optBase.map(function (path) { 
       return connect.static(path); 
      })); 
     } 
     }, 
     livereload: { 
     options: { 
      open: true, 
      base: [ 
      '.tmp', 
      '<%= yeoman.app %>' 
      ] 
     } 
     }, 
     test: { 
     options: { 
      port: 9001, 
      base: [ 
      '.tmp', 
      'test', 
      '<%= yeoman.app %>' 
      ] 
     } 
     }, 
     dist: { 
     options: { 
      base: '<%= yeoman.dist %>' 
     } 
     } 
    }, 
    clean: { 
     dist: { 
     files: [ 
      { 
      dot: true, 
      src: [ 
       '.tmp', 
       '<%= yeoman.dist %>/*', 
       '!<%= yeoman.dist %>/.git*' 
      ] 
      } 
     ] 
     }, 
     server: '.tmp' 
    }, 
    jshint: { 
     options: { 
     jshintrc: '.jshintrc' 
     }, 
     all: [ 
     'Gruntfile.js', 
     '<%= yeoman.app %>/scripts/{,*/}*.js' 
     ] 
    }, 
    coffee: { 
     options: { 
     sourceMap: true, 
     sourceRoot: '' 
     }, 
     dist: { 
     files: [ 
      { 
      expand: true, 
      cwd: '<%= yeoman.app %>/scripts', 
      src: '{,*/}*.coffee', 
      dest: '.tmp/scripts', 
      ext: '.js' 
      } 
     ] 
     }, 
     test: { 
     files: [ 
      { 
      expand: true, 
      cwd: 'test/spec', 
      src: '{,*/}*.coffee', 
      dest: '.tmp/spec', 
      ext: '.js' 
      } 
     ] 
     } 
    }, 
    compass: { 
     options: { 
     sassDir: '<%= yeoman.app %>/styles', 
     cssDir: '.tmp/styles', 
     generatedImagesDir: '.tmp/images/generated', 
     imagesDir: '<%= yeoman.app %>/images', 
     javascriptsDir: '<%= yeoman.app %>/scripts', 
     fontsDir: '<%= yeoman.app %>/styles/fonts', 
     importPath: '<%= yeoman.app %>/bower_components', 
     httpImagesPath: '/images', 
     httpGeneratedImagesPath: '/images/generated', 
     httpFontsPath: '/styles/fonts', 
     relativeAssets: false 
     }, 
     dist: {}, 
     server: { 
     options: { 
      debugInfo: true 
     } 
     } 
    }, 
    // not used since Uglify task does concat, 
    // but still available if needed 
    /*concat: { 
    dist: {} 
    },*/ 
    rev: { 
     dist: { 
     files: { 
      src: [ 
      '<%= yeoman.dist %>/scripts/{,*/}*.js', 
      '<%= yeoman.dist %>/styles/{,*/}*.css', 
      //'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
      //'<%= yeoman.dist %>/styles/fonts/*' 
      ] 
     } 
     } 
    }, 
    useminPrepare: { 
     // changed from app to dist, to take index.html processed by includeSource in dist 
     html: '<%= yeoman.dist %>/index.html', 
     options: { 
     dest: '<%= yeoman.dist %>' 
     } 
    }, 
    usemin: { 
     //html: ['<%= yeoman.dist %>/{,*/}*.html'], 
     html: ['<%= yeoman.dist %>/index.html'], 
     //css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
     //js: ['<%= yeoman.dist %>/scripts/**/*.js'], 
     options: { 
     dirs: ['<%= yeoman.dist %>'] 
     } 
    }, 
    imagemin: { 
     dist: { 
     files: [ 
      { 
      expand: true, 
      cwd: '<%= yeoman.app %>/images', 
      src: '{,*/}*.{png,jpg,jpeg}', 
      dest: '<%= yeoman.dist %>/images' 
      } 
     ] 
     } 
    }, 
    svgmin: { 
     dist: { 
     files: [ 
      { 
      expand: true, 
      cwd: '<%= yeoman.app %>/images', 
      src: '{,*/}*.svg', 
      dest: '<%= yeoman.dist %>/images' 
      } 
     ] 
     } 
    }, 
    cssmin: { 
     // By default, your `index.html` <!-- Usemin Block --> will take care of 
     // minification. This option is pre-configured if you do not wish to use 
     // Usemin blocks. 
     // dist: { 
     // files: { 
     //  '<%= yeoman.dist %>/styles/main.css': [ 
     //  '.tmp/styles/{,*/}*.css', 
     //  '<%= yeoman.app %>/styles/{,*/}*.css' 
     //  ] 
     // } 
     // } 
    }, 
    htmlmin: { 
     dist: { 
     options: { 
      /*removeCommentsFromCDATA: true, 
      // https://github.com/yeoman/grunt-usemin/issues/44 
      //collapseWhitespace: true, 
      collapseBooleanAttributes: true, 
      removeAttributeQuotes: true, 
      removeRedundantAttributes: true, 
      useShortDoctype: true, 
      removeEmptyAttributes: true, 
      removeOptionalTags: true*/ 
     }, 
     files: [ 
      { 
      expand: true, 
      cwd: '<%= yeoman.app %>', 
      src: ['*.html', 'views/**/*.html', 'blocs/**/*.html'], 
      dest: '<%= yeoman.dist %>' 
      } 
     ] 
     } 
    }, 
    // Put files not handled in other tasks here 
    copy: { 
     dist: { 
     files: [ 
      { 
      expand: true, 
      dot: true, 
      cwd: '<%= yeoman.app %>', 
      dest: '<%= yeoman.dist %>', 
      src: [ 
       '*.{ico,png,txt}', 
       '.htaccess', 
       'bower_components/**/*', 
       'images/{,*/}*.{gif,webp}', 
       'assets/**/*', 
       'fonts/**/*', 
       'styles/fonts/*' 
      ] 
      }, 
      { 
      expand: true, 
      cwd: '.tmp/images', 
      dest: '<%= yeoman.dist %>/images', 
      src: [ 
       'generated/*' 
      ] 
      } 
     ] 
     }, 
     styles: { 
     expand: true, 
     cwd: '<%= yeoman.app %>/styles', 
     dest: '.tmp/styles/', 
     src: '{,*/}*.css' 
     } 
    }, 
    concurrent: { 
     server: [ 
     'coffee:dist', 
     'compass:server', 
     'copy:styles' 
     ], 
     test: [ 
     'coffee', 
     'compass', 
     'copy:styles' 
     ], 
     dist: [ 
     'coffee', 
     'compass:dist', 
     'copy:styles', 
     'imagemin', 
     'svgmin', 
     'htmlmin' 
     ] 
    }, 
    //karma: { 
    // unit: { 
    // configFile: 'karma.conf.js', 
    // singleRun: true 
    // } 
    //}, 
    cdnify: { 
     dist: { 
     html: ['<%= yeoman.dist %>/*.html'] 
     } 
    }, 
    ngmin: { 
     dist: { 
     files: [ 
      { 
      expand: true, 
      cwd: '<%= yeoman.dist %>/scripts', 
      src: '*.js', 
      dest: '<%= yeoman.dist %>/scripts' 
      } 
     ] 
     } 
    }, 
    uglify: { 
     dist: { 
     files: { 
      '<%= yeoman.dist %>/scripts/scripts.js': [ 
      '<%= yeoman.dist %>/scripts/scripts.js' 
      ] 
     } 
     } 
    }, 

    preprocess: { 
     options: { 
     context: { 
      // /!\ Security warning: 
      // On heroku, process.env might contain sensitive information. (such as DATABASE_URL) 
      // To make sure what fields we pass, we specify every field explicitly. 
      // So DON'T do this: ENV: JSON.stringify(process.env) 

      ENV: JSON.stringify({ 
      FIRST_VAR: process.env.FIRST_VAR || '', 
      SECOND_VAR: process.env.SECOND_VAR || '', 
      NODE_ENV: process.env.NODE_ENV || 'production' 
      }) 
     } 
     }, 
     server: { 
     src: 'app/scripts/config.js', dest: 'app/scripts/config.processed.js'//dest: '.tmp/scripts/config.js' 
     }, 
     dist: { 
     src: 'app/scripts/config.js', dest: 'app/scripts/config.processed.js'//dest: 'dist/scripts/config.js' 
     } 
    }, 
    includeSource: { 
     options: { 
     basePath: 'app', 
     baseUrl: '/', 
     }, 
     server: { 
     files: { 
      '.tmp/index.html': 'app/index.html' 
     } 
     }, 
     dist: { 
     files: { 
      'dist/index.html': 'app/index.html' 
     } 
     } 
    } 
    }); 

    grunt.registerTask('server', function (target) { 
    if (target === 'dist') { 
     return grunt.task.run(['build', 'connect:dist:keepalive']); 
    } 

    grunt.task.run([ 
     'clean:server', 
     'includeSource:server', 
     'preprocess:server', 
     'concurrent:server', 
     'autoprefixer', 
     'connect:livereload', 
     'watch' 
    ]); 
    }); 

    grunt.registerTask('test', [ 
    'clean:server', 
    'concurrent:test', 
    'autoprefixer', 
    'connect:test' 
    //'karma' 
    ]); 

    grunt.registerTask('build', [ 
    'clean:dist', 
    'includeSource:dist', 
    'preprocess:dist', 
    'useminPrepare', 

    'concurrent:dist', 
    'autoprefixer', 
    'concat', 
    'copy:dist', 
    'cdnify', 
    'ngmin', 
    'cssmin', 
    //'uglify', 
    'rev', 
    'usemin' 
    ]); 

    grunt.registerTask('default', [ 
    'jshint', 
    'test', 
    'build' 
    ]); 

    // building the app on heroku 
    grunt.registerTask('heroku', 'build'); 

}; 
+0

您可以发布Grunt配置吗? – imcg

+0

@imcg添加了我的Gruntfile –

+0

对不起,我无法看到您将Gruntfile中的文件连接到哪里。无法看到预处理 – imcg

回答

0

有了这个包:

https://www.npmjs.org/package/grunt-file-append

你可以追加生成的文件以级联的临时文件。

您应该完全从html中删除config js的引用,并在构建任务列表中的concat任务之后添加file-append任务,以将生成的配置文件附加到并置的js。

3

我有同样的问题,我有以下步骤解决:

1)使用生成类型不同的是“JS”您的脚本,所以usemin插件会忽略它的生成过程。例如,“dev”。

<!-- build:dev({.tmp,dist,app}) --><script src="/scripts/config.js"></script><!-- endbuild --> 

注意有没有空格由于对usemin(Issue 128)的错误。我正在运行usemin版本2.1.1

有了这个,grunt sever将使用您的源代码中的config.js。

2)修改您的预处理任务,将您的预处理文件放入临时文件夹,如.tmp。例如:

dist: { 
     src: 'app/scripts/config.js', dest: '.tmp/scripts/config.processed.js' 
     } 

3)现在,你需要创建一个咕噜任务以的毗连您在文件夹中的.tmp与config.processed.js脚本/在你的DIST文件夹中的application.js,是由动态生成usemin。

例如:

concat: { 
      environment: { 
       dest: 'dist/scripts/application.js', 
       src: ['dist/scripts/application.js', '.tmp/scripts/config.processed.js'] 
      } 
     }, 

如果您使用的是Windows,你需要使用\\,而不是/

4)最后,你需要把所有的一起。您的构建任务应如下所示:

grunt.registerTask('build', [ 
    'clean:dist', 
    'includeSource:dist', 
    'preprocess:dist', 
    'useminPrepare', 
    'concurrent:dist', 
    'autoprefixer', 
    'concat', 
    'copy:dist', 
    'cdnify', 
    'ngmin', 
    'cssmin', 
    'concat:environment', 
    'uglify', 
    'rev', 
    'usemin' 
    ]);