Grunt usemin前端自動化打包流程

本文轉載自查看原文 2015-06-30 10:37 2641 Grunt

前端優化是盡量減少http請求，所以我們需要盡量合並壓縮文件，然后調用壓縮后的文件，比如多個css文件壓縮成一個，多個js文件合並壓縮等，usemin能夠自動在html中使用壓縮后的文件，達到上面的目的。

上圖是完整打包后的文件目錄，原始目錄是assets,打包發布的文件是dist.

gruntfile.js文件內容：

module.exports = function(grunt) {

    grunt.config.init({
      clean:{
          src:"dist/"
      },
      useminPrepare: {
          html: 'index.html',
          options: {
            dest: 'dist'
          }
      },
        usemin: {
            html: ['dist/index.html']
        },
        uglify: {
            'dist/js/app.min.js': ['assets/js/*.js']
        },
        copy: {
            html: {
                src: './index.html',
                dest: 'dist/index.html'
            }
        },
        cssmin:{
                'dist/css/app.min.css': ['assets/css/*.css']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.registerTask('default',[
        'clean',
        'copy:html',
        'useminPrepare',
        'uglify',
        'cssmin',
        'usemin'
    ]);
}

原始的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Usemin test</title>
    <!-- build:css dist/css/app.min.css -->
      <link rel="stylesheet" type="text/css" href="./assets/css/style.css" media="screen" />
    <!-- endbuild -->
  </head>
  <body>
  
  </body>
  <!-- build:js dist/js/app.min.js -->
    <script src="./assets/js/foo.js"></script>
    <script src="./assets/js/bar.js"></script>
  <!-- endbuild -->  
</html>

打包后的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Usemin test</title>
    <link rel="stylesheet" href="dist/css/app.min.css" media="screen"/>
  </head>
  <body>
  
  </body>
  <script src="dist/js/app.min.js"></script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端工作流程自動化——Grunt/Gulp 自動化 [前端自動化]grunt的簡單使用應用Grunt自動化地優化你的項目前端前端自動化開發之grunt 【前端福利】用grunt搭建自動化的web前端開發環境-完整教程用grunt搭建自動化的web前端開發環境實戰教程(詳細步驟) grunt之filerev、usemin 自動化流程完成打包 IPA 到上傳 AppStore（部分）細說前端自動化打包工具--webpack 前端自動化工具 -- Grunt 使用簡介