2013-10-29 3 views
0

저는 기본 yeoman webapp 템플릿을 requirejs와 함께 사용하고 있습니다. 이제 빌드하고 싶습니다. 그러나, 나는 각 모듈을 하나의 파일 (최적화 된 방법)로 연결하는 것을 원치 않습니다.yeoman/grunt and requirejs - 출력을 연결하지 않습니다 (최적화)

어떻게하면 모든 모듈을 복사하고 복사하지 못하게 할 수 있습니까?

내 Gruntfile.js :

// Generated on 2013-10-23 using generator-webapp 0.4.3 
'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) { 
    // show elapsed time at the end 
    require('time-grunt')(grunt); 
    // load all grunt tasks 
    require('load-grunt-tasks')(grunt); 

    grunt.initConfig({ 
     // configurable paths 
     yeoman: { 
      app: '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}' 
       ] 
      } 
     }, 
     connect: { 
      options: { 
       port: 9000, 
       livereload: 35729, 
       // change this to '0.0.0.0' to access the server from outside 
       hostname: 'localhost' 
      }, 
      livereload: { 
       options: { 
        open: true, 
        base: [ 
         '.tmp', 
         '<%= yeoman.app %>' 
        ] 
       } 
      }, 
      test: { 
       options: { 
        base: [ 
         '.tmp', 
         'test', 
         '<%= yeoman.app %>' 
        ] 
       } 
      }, 
      dist: { 
       options: { 
        open: true, 
        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', 
       '!<%= yeoman.app %>/scripts/vendor/*', 
       'test/spec/{,*/}*.js' 
      ] 
     }, 
     mocha: { 
      all: { 
       options: { 
        run: true, 
        urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html'] 
       } 
      } 
     }, 
     coffee: { 
      options: { 
       bare: true 
      }, 
      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: { 
       require: 'susy', 
       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, 
       assetCacheBuster: false 
      }, 
      dist: { 
       options: { 
        generatedImagesDir: '<%= yeoman.dist %>/images/generated' 
       } 
      }, 
      server: { 
       options: { 
        debugInfo: true 
       } 
      } 
     }, 
     autoprefixer: { 
      options: { 
       browsers: ['last 1 version'] 
      }, 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '.tmp/styles/', 
        src: '{,*/}*.css', 
        dest: '.tmp/styles/' 
       }] 
      } 
     }, 
     // not used since Uglify task does concat, 
     // but still available if needed 
     /*concat: { 
      dist: {} 
     },*/ 
     requirejs: { 
      dist: { 
       // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js 
       options: { 
        // `name` and `out` is set by grunt-usemin 
        baseUrl: '<%= yeoman.app %>/scripts', 
        optimize: 'uglify2', // uglify, uglify2, closure, closure.keepLines, none 
        // TODO: Figure out how to make sourcemaps work with grunt-usemin 
        // https://github.com/yeoman/grunt-usemin/issues/30 
        //generateSourceMaps: true, 
        // required to support SourceMaps 
        // http://requirejs.org/docs/errors.html#sourcemapcomments 
        preserveLicenseComments: false, 
        useStrict: true, 
        wrap: true 
        //uglify2: {} // https://github.com/mishoo/UglifyJS2 
       } 
      } 
     }, 
     rev: { 
      dist: { 
       files: { 
        src: [ 
         '<%= yeoman.dist %>/scripts/{,*/}*.js', 
         '<%= yeoman.dist %>/styles/{,*/}*.css', 
         '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}', 
         '<%= yeoman.dist %>/styles/fonts/{,*/}*.*' 
        ] 
       } 
      } 
     }, 
     useminPrepare: { 
      options: { 
       dest: '<%= yeoman.dist %>' 
      }, 
      html: '<%= yeoman.app %>/index.html' 
     }, 
     usemin: { 
      options: { 
       dirs: ['<%= yeoman.dist %>'] 
      }, 
      html: ['<%= yeoman.dist %>/{,*/}*.html'], 
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'] 
     }, 
     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: { 
      // This task is pre-configured if you do not wish to use Usemin 
      // blocks for your CSS. By default, the Usemin block from your 
      // `index.html` will take care of minification, e.g. 
      // 
      //  <!-- build:css({.tmp,app}) styles/main.css --> 
      // 
      // 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', 
        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', 
         'images/{,*/}*.{webp,gif}', 
         'styles/fonts/{,*/}*.*', 
         'bower_components/sass-bootstrap/fonts/*.*' 
        ] 
       }] 
      }, 
      styles: { 
       expand: true, 
       dot: true, 
       cwd: '<%= yeoman.app %>/styles', 
       dest: '.tmp/styles/', 
       src: '{,*/}*.css' 
      } 
     }, 
     modernizr: { 
      devFile: '<%= yeoman.app %>/bower_components/modernizr/modernizr.js', 
      outputFile: '<%= yeoman.dist %>/bower_components/modernizr/modernizr.js', 
      files: [ 
       '<%= yeoman.dist %>/scripts/{,*/}*.js', 
       '<%= yeoman.dist %>/styles/{,*/}*.css', 
       '!<%= yeoman.dist %>/scripts/vendor/*' 
      ], 
      uglify: true 
     }, 
     concurrent: { 
      server: [ 
       'compass', 
       'coffee:dist', 
       'copy:styles' 
      ], 
      test: [ 
       'coffee', 
       'copy:styles' 
      ], 
      dist: [ 
       'coffee', 
       'compass', 
       'copy:styles', 
       'imagemin', 
       'svgmin', 
       'htmlmin' 
      ] 
     }, 
     bower: { 
      options: { 
       exclude: ['modernizr'] 
      }, 
      all: { 
       rjsConfig: '<%= yeoman.app %>/scripts/main.js' 
      } 
     } 
    }); 

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

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

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

    grunt.registerTask('build', [ 
     'clean:dist', 
     'useminPrepare', 
     'concurrent:dist', 
     'autoprefixer', 
     'requirejs', 
     'concat', 
     'cssmin', 
     'uglify', 
     'modernizr', 
     'copy:dist', 
     'rev', 
     'usemin' 
    ]); 

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

답변

0

useminPrepareusemin 작업 스크립트 (과 스타일을) 합치 할 책임이 있습니다. 이들은 HTML 주석을 사용하여 연결/축소 대상을 결정합니다.

여기에 HTML의 비트 generator-angular 어제의 실행에서 내 index.html에있어 다음 <!-- build --> 의견이 스크립트를 포장하는 방법

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

주의 사항은? 이 주석은 useminbuildendbuild 사이의 스크립트를 연결하고 축소하도록 지시합니다.

<script> 태그 주변에서 <!-- build --><!-- endbuild --> 개의 주석을 제거하기 만하면 usemin이 연결 및 축소하지 않습니다.

는 (당신은 grunt을 실행할 때 추하게에서 오류가 발생할 경우 Gruntfile.js 작업 build을 조정해야합니다. 목록에서 uglify를 제거하십시오.)

1

당신은 여기에서 자세한 내용을 볼 수있는 requirejs와 유사시를 사용하는 방법에 대해 설명합니다 2014 : http://www.webdesignporto.com/3-steps-to-fully-automatized-javascript-environment-with-yeoman-and-require-js-for-lazy-people/

+0

안녕하세요. @ Totty.js,이 링크는 지금 삭제 된 것 같습니다. 나는 그것을 얼마 전에 사용하는 것을 기억한다. 지금 다른 곳에서 호스팅되고 있습니까? 원본 기사의 작성자 인 경우 다시 공유 할 수 있습니까? 그리고 그것을 쓰는 것에 대한 큰 감사 –

0

concunt/usemin/useminprepare 하위 작업을 제거하려면 '빌드'에 대한 Gruntfile의 작업 정의를 편집 할 수 있습니다. @ jevets처럼, HTML에서 <!-- build -->...<!-- endbuild --> 개의 댓글을 삭제하십시오.