2013-07-13 36 views
4

我使用自耕農1.0 RC咕嚕創建靜態網站,everithing工作正常,但我要讓除了CSS精縮版,非縮小的版本,所有的更新文件路徑,這是可行的,我怎麼能實現這一點。咕嚕cssmin保護非精縮版

gruntfile是由yo webapp創建的非常標準的grunt文件。

module.exports = function (grunt) { 
// load all grunt tasks 
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 

// configurable paths 
var yeomanConfig = { 
    app: 'app', 
    dist: 'dist' 
}; 

grunt.initConfig({ 
    yeoman: yeomanConfig, 
    watch: { 
     options: { 
      nospawn: true 
     }, 
     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'] 
     }, 
     livereload: { 
      options: { 
       livereload: LIVERELOAD_PORT 
      }, 
      files: [ 
       '<%= yeoman.app %>/*.html', 
       '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', 
       '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', 
       '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
      ] 
     } 
    }, 
    connect: { 
     options: { 
      port: 9000, 
      // change this to '0.0.0.0' to access the server from outside 
      hostname: 'localhost' 
     }, 
     livereload: { 
      options: { 
       middleware: function (connect) { 
        return [ 
         mountFolder(connect, '.tmp'), 
         mountFolder(connect, yeomanConfig.app), 
         lrSnippet 
        ]; 
       } 
      } 
     }, 
     test: { 
      options: { 
       middleware: function (connect) { 
        return [ 
         mountFolder(connect, '.tmp'), 
         mountFolder(connect, 'test') 
        ]; 
       } 
      } 
     }, 
     dist: { 
      options: { 
       middleware: function (connect) { 
        return [ 
         mountFolder(connect, yeomanConfig.dist) 
        ]; 
       } 
      } 
     } 
    }, 
    open: { 
     server: { 
      path: 'http://localhost:<%= connect.options.port %>' 
     } 
    }, 
    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://localhost:<%= connect.options.port %>/index.html'] 
      } 
     } 
    }, 
    coffee: { 
     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', 
      relativeAssets: false 
     }, 
     dist: { 
      options:{ 
       outputStyle: 'nested' 
      } 
     }, 
     server: { 
      options: { 
       debugInfo: true 
      } 
     } 
    }, 
    // not used since Uglify task does concat, 
    // but still available if needed 
    /*concat: { 
     dist: {} 
    },*/ 
    // not enabled since usemin task does concat and uglify 
    // check index.html to edit your build targets 
    // enable this task if you prefer defining your build targets here 
    /*uglify: { 
     dist: {} 
    },*/ 
    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: { 
     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,txt}', 
        '.htaccess', 
        'images/{,*/}*.{webp,gif}', 
        'styles/fonts/*' 
       ] 
      }, { 
       expand: true, 
       cwd: '.tmp/images', 
       dest: '<%= yeoman.dist %>/images', 
       src: [ 
        'generated/*' 
       ] 
      }] 
     } 
    }, 
    concurrent: { 
     server: [ 
      'coffee:dist', 
      'compass:server' 
     ], 
     test: [ 
      'coffee', 
      'compass' 
     ], 
     dist: [ 
      'coffee', 
      'compass:dist', 
      'imagemin', 
      'svgmin', 
      'htmlmin' 
     ] 
    } 
}); 

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

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

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

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

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

};

謝謝。

回答

0

對於生產目的,你應該始終瞄準文件的最小量(因爲最「昂貴」(時間明智)的HTTP被打開連接,特別是在移動圖謀)和最低的文件大小。 含義部署生產的「dist」文件夾。

爲了測試目的,我通常部署「應用程序」文件夾,因爲速度在這裏不是問題,我會的,就像你寫的那樣,能夠精確地在代碼中找到問題(css og js)問題是。

所以我會考慮只是部署「應用程序」文件夾,直到你確定一切都是你想要的。