2014-06-18 27 views
6

Khi xây dựng Grunt, làm cách nào để nắm bắt đường dẫn thích hợp của bower_components để tạo một tệp vendor.js đầy đủ các thành phần bower trong thư mục dist. Tôi đã chỉ ra lý do, usemin của Grunt xây dựng đang xây dựng vendor.js từ thư mục sai.adding tiền tố thư mục ứng dụng.usemin on grunt Xây dựng không phải là xây dựng các thành phần bower đúng vào thư mục dist

làm cách nào để loại bỏ tiền tố ứng dụng này để xây dựng grunt đúng cách xây dựng các thành phần bower của tôi?

Grunt Xây dựng: nhưng xây dựng nó thực hiện một tập tin nhà cung cấp 0KB vì bower_components đang ở trong một thư mục trên ứng dụng enter image description here

Như bạn thấy bower_components tôi sống bên ngoài thư mục ứng dụng của tôi

enter image description here

Usemin:

<!-- build:js scripts/vendor.js --> 
    <!-- bower:js --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="bower_components/angular-animate/angular-animate.js"></script> 
    <script src="bower_components/angular-touch/angular-touch.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 

     <!-- build:js({.tmp,app}) scripts/scripts.js --> 
     <script src="scripts/app.js"></script> 
     <script src="scripts/controllers/main.js"></script> 
     <script src="scripts/controllers/about.js"></script> 
     <script src="scripts/controllers/categories.js"></script> 
     <script src="scripts/controllers/footer.js"></script> 
     <script src="scripts/controllers/navigation.js"></script> 
     <script src="scripts/controllers/shoppanel.js"></script> 
     <script src="scripts/controllers/sidepanel.js"></script> 
     <script src="scripts/controllers/weekly.js"></script> 
     <!-- directives --> 
     <script src="scripts/directives/slideshow.js"></script> 
     <!-- .directives --> 
     <!-- models --> 
     <script src="scripts/models/pages.js"></script> 
     <!-- .models --> 
     <!-- endbuild --> 

Grunt File:

// Generated on 2014-06-17 using generator-angular 0.9.0-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) { 

    // Load grunt tasks automatically 
    require('load-grunt-tasks')(grunt); 

    // Time how long tasks take. Can help when optimizing build times 
    require('time-grunt')(grunt); 

    // Configurable paths for the application 
    var appConfig = { 
    app: require('./bower.json').appPath || 'app', 
    dist: 'dist' 
    }; 

    // Define the configuration for all the tasks 
    grunt.initConfig({ 

    // Project settings 
    yeoman: appConfig, 

    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
     bower: { 
     files: ['bower.json'], 
     tasks: ['wiredep'] 
     }, 
     js: { 
     files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 
     tasks: ['newer:jshint:all'], 
     options: { 
      livereload: '<%= connect.options.livereload %>' 
     } 
     }, 
     jsTest: { 
     files: ['test/spec/{,*/}*.js'], 
     tasks: ['newer:jshint:test', 'karma'] 
     }, 
     compass: { 
     files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
     tasks: ['compass:server', 'autoprefixer'] 
     }, 
     gruntfile: { 
     files: ['Gruntfile.js'] 
     }, 
     livereload: { 
     options: { 
      livereload: '<%= connect.options.livereload %>' 
     }, 
     files: [ 
      '<%= yeoman.app %>/{,*/}*.html', 
      '.tmp/styles/{,*/}*.css', 
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
     ] 
     } 
    }, 

    // The actual grunt server settings 
    connect: { 
     options: { 
     port: 9000, 
     // Change this to '0.0.0.0' to access the server from outside. 
     hostname: 'localhost', 
     livereload: 35729 
     }, 
     livereload: { 
     options: { 
      open: true, 
      middleware: function (connect) { 
      return [ 
       connect.static('.tmp'), 
       connect().use(
       '/bower_components', 
       connect.static('./bower_components') 
      ), 
       connect.static(appConfig.app) 
      ]; 
      } 
     } 
     }, 
     test: { 
     options: { 
      port: 9001, 
      middleware: function (connect) { 
      return [ 
       connect.static('.tmp'), 
       connect.static('test'), 
       connect().use(
       '/bower_components', 
       connect.static('./bower_components') 
      ), 
       connect.static(appConfig.app) 
      ]; 
      } 
     } 
     }, 
     dist: { 
     options: { 
      open: true, 
      base: '<%= yeoman.dist %>' 
     } 
     } 
    }, 

    // Make sure code styles are up to par and there are no obvious mistakes 
    jshint: { 
     options: { 
     jshintrc: '.jshintrc', 
     reporter: require('jshint-stylish') 
     }, 
     all: { 
     src: [ 
      'Gruntfile.js', 
      '<%= yeoman.app %>/scripts/{,*/}*.js' 
     ] 
     }, 
     test: { 
     options: { 
      jshintrc: 'test/.jshintrc' 
     }, 
     src: ['test/spec/{,*/}*.js'] 
     } 
    }, 

    // Empties folders to start fresh 
    clean: { 
     dist: { 
     files: [{ 
      dot: true, 
      src: [ 
      '.tmp', 
      '<%= yeoman.dist %>/{,*/}*', 
      '!<%= yeoman.dist %>/.git*' 
      ] 
     }] 
     }, 
     server: '.tmp' 
    }, 

    // Add vendor prefixed styles 
    autoprefixer: { 
     options: { 
     browsers: ['last 1 version'] 
     }, 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/styles/', 
      src: '{,*/}*.css', 
      dest: '.tmp/styles/' 
     }] 
     } 
    }, 

    // Automatically inject Bower components into the app 
    wiredep: { 
     app: { 
     src: ['<%= yeoman.app %>/index.html'], 
     ignorePath: new RegExp('^<%= yeoman.app %>/|../') 
     }, 
     sass: { 
     src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
     ignorePath: /(\.\.\/){1,2}bower_components\// 
     } 
    }, 

    // Compiles Sass to CSS and generates necessary files if requested 
    compass: { 
     options: { 
     require: ['susy','breakpoint'], 
     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: './bower_components', 
     httpImagesPath: '/images', 
     httpGeneratedImagesPath: '/images/generated', 
     httpFontsPath: '/styles/fonts', 
     relativeAssets: false, 
     assetCacheBuster: false, 
     raw: 'Sass::Script::Number.precision = 10\n' 
     }, 
     dist: { 
     options: { 
      generatedImagesDir: '<%= yeoman.dist %>/images/generated' 
     } 
     }, 
     server: { 
     options: { 
      debugInfo: true 
     } 
     } 
    }, 

    // Renames files for browser caching purposes 
    filerev: { 
     dist: { 
     src: [ 
      '<%= yeoman.dist %>/scripts/{,*/}*.js', 
      '<%= yeoman.dist %>/styles/{,*/}*.css', 
      '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
      '<%= yeoman.dist %>/styles/fonts/*' 
     ] 
     } 
    }, 

    // Reads HTML for usemin blocks to enable smart builds that automatically 
    // concat, minify and revision files. Creates configurations in memory so 
    // additional tasks can operate on them 
    useminPrepare: { 
     html: '<%= yeoman.app %>/index.html', 
     options: { 
     dest: '<%= yeoman.dist %>', 
     flow: { 
      html: { 
      steps: { 
       js: ['concat', 'uglifyjs'], 
       css: ['cssmin'] 
      }, 
      post: {} 
      } 
     } 
     } 
    }, 

    // Performs rewrites based on filerev and the useminPrepare configuration 
    usemin: { 
     html: ['<%= yeoman.dist %>/{,*/}*.html'], 
     css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
     options: { 
     assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images'] 
     } 
    }, 

    // The following *-min tasks will produce minified files in the dist folder 
    // By default, your `index.html`'s <!-- Usemin block --> will take care of 
    // minification. These next options are pre-configured if you do not wish 
    // to use the Usemin blocks. 
    // cssmin: { 
    // dist: { 
    //  files: { 
    //  '<%= yeoman.dist %>/styles/main.css': [ 
    //   '.tmp/styles/{,*/}*.css' 
    //  ] 
    //  } 
    // } 
    // }, 
    // uglify: { 
    // dist: { 
    //  files: { 
    //  '<%= yeoman.dist %>/scripts/scripts.js': [ 
    //   '<%= yeoman.dist %>/scripts/scripts.js' 
    //  ] 
    //  } 
    // } 
    // }, 
    // concat: { 
    // dist: {} 
    // }, 

    imagemin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '<%= yeoman.app %>/images', 
      src: '{,*/}*.{png,jpg,jpeg,gif}', 
      dest: '<%= yeoman.dist %>/images' 
     }] 
     } 
    }, 

    svgmin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '<%= yeoman.app %>/images', 
      src: '{,*/}*.svg', 
      dest: '<%= yeoman.dist %>/images' 
     }] 
     } 
    }, 

    htmlmin: { 
     dist: { 
     options: { 
      collapseWhitespace: true, 
      conservativeCollapse: true, 
      collapseBooleanAttributes: true, 
      removeCommentsFromCDATA: true, 
      removeOptionalTags: true 
     }, 
     files: [{ 
      expand: true, 
      cwd: '<%= yeoman.dist %>', 
      src: ['*.html', 'views/{,*/}*.html'], 
      dest: '<%= yeoman.dist %>' 
     }] 
     } 
    }, 

    // ngmin tries to make the code safe for minification automatically by 
    // using the Angular long form for dependency injection. It doesn't work on 
    // things like resolve or inject so those have to be done manually. 
    ngmin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/concat/scripts', 
      src: '*.js', 
      dest: '.tmp/concat/scripts' 
     }] 
     } 
    }, 

    // Replace Google CDN references 
    cdnify: { 
     dist: { 
     html: ['<%= yeoman.dist %>/*.html'] 
     } 
    }, 

    // Copies remaining files to places other tasks can use 
    copy: { 
     dist: { 
     files: [{ 
      expand: true, 
      dot: true, 
      cwd: '<%= yeoman.app %>', 
      dest: '<%= yeoman.dist %>', 
      src: [ 
      '*.{ico,png,txt}', 
      '.htaccess', 
      '*.html', 
      'views/{,*/}*.html', 
      'images/{,*/}*.{webp}', 
      'fonts/*' 
      ] 
     }, { 
      expand: true, 
      cwd: '.tmp/images', 
      dest: '<%= yeoman.dist %>/images', 
      src: ['generated/*'] 
     }] 
     }, 
     styles: { 
     expand: true, 
     cwd: '<%= yeoman.app %>/styles', 
     dest: '.tmp/styles/', 
     src: '{,*/}*.css' 
     } 
    }, 

    // Run some tasks in parallel to speed up the build process 
    concurrent: { 
     server: [ 
     'compass:server' 
     ], 
     test: [ 
     'compass' 
     ], 
     dist: [ 
     'compass:dist', 
     'imagemin', 
     'svgmin' 
     ] 
    }, 

    // Test settings 
    karma: { 
     unit: { 
     configFile: 'test/karma.conf.js', 
     singleRun: true 
     } 
    } 
    }); 


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

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

    grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) { 
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
    grunt.task.run(['serve:' + target]); 
    }); 

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

    grunt.registerTask('build', [ 
    'clean:dist', 
    'wiredep', 
    'useminPrepare', 
    'concurrent:dist', 
    'autoprefixer', 
    'concat', 
    'ngmin', 
    'copy:dist', 
    'cdnify', 
    'cssmin', 
    'uglify', 
    // 'filerev', 
    'usemin', 
    'htmlmin' 
    ]); 

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

Trả lời

9

Từ doc grunt-usemin:

Theo mặc định các tập tin đầu vào có liên quan đến các tập tin xử lý. Đường dẫn tìm kiếm thay thế cho phép một thay đổi đó

Cung cấp đường dẫn tìm kiếm thay thế sẽ làm. Trong trường hợp của bạn là .

<!-- build:js(.) scripts/vendor.js --> 
+0

Bạn là một vị thánh. (~ '.') ~ –

Các vấn đề liên quan