Grunt使用手册

作者: 李佶澳   转载请保留:原文地址   更新时间:2018/08/30 18:31:26

Grunt项目

项目中添加两份文件:package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。

安装

npm install -g grunt-cli

package.json

package.json应当放置于项目的根目录中,与Gruntfile在同一目录中,并且应该与项目的源代码一起被提交。

在项目目录里运行npm install时,packeg.json中列出的依赖文件会被自动安装到项目根目录下的node_modules目录中。

创建基本的package.json:

npm init

安装依赖包,并将其写入package.json:

npm install <module> --save-dev

package.json

{
  "name": "enterpaas",
  "private": true,
  "devDependencies": {
    "autoprefixer-core": "^5.2.1",
    "grunt": "^0.4.5",
    "grunt-angular-templates": "^0.5.7",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-copy": "^0.7.0",
    ... 省略...
    "karma": "^1.6.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "phantomjs-prebuilt": "^2.1.14",
    "time-grunt": "^1.0.0"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "karma start test/karma.conf.js"
  }
}

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件。

应当放在你的项目根目录中,和package.json文件在同一目录层级,并和项目源码一起加入源码管理器。

module.exports = function(grunt) {                   //warpper函数,Grunt代码必须都在这个函数里

  grunt.initConfig({                                 //initConfig的参数一个map,可以任意添加key-value
    pkg: grunt.file.readJSON('package.json'),
    uglify: {                                        //插件grunt-contrib-uglify要求的参数
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');        //加载包含 "uglify" 任务的插件
  grunt.registerTask('default', ['uglify']);         //默认被执行的任务列表

};

Grunt插件

主要还是用插件!Grunt插件

grunt-contrib-clean

grunt-contrib-clean删除指定的文件

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

grunt clean将会删除distserver中的文件。

grunt clean:dist删除dist中的文件。

grunt-wiredep

grunt-wiredep finds your components and injects them directly into the HTML file you specify.

grunt-usemin

grunt-usemin replaces the references of scripts, stylesheets and other assets within HTML files dynamically with optimized versions of them.

usemin包含两个过程useminPrepareusermin

userminPrepare将指定的html文件中的被标记的代码段(block)中的link压缩替换

block标记方法:

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

例如,将代码块中的所有css文件将为压缩成vendor.css:

<!-- build:css(.) styles/vendor.css -->
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bower_components/AdminLTE/bootstrap/css/bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="bower_components/AdminLTE/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="bower_components/AdminLTE/dist/css/skins/_all-skins.min.css">
<!-- endbuild -->

useminPrepare:

// 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: {}
      }
    }
  }
},

usermin:

// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>',
      '<%= yeoman.dist %>/images',
      '<%= yeoman.dist %>/styles'
    ],
    patterns: {
      js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
    }
  }
},

参考

  1. Gruntjs
  2. Gruntjs Quick Start
  3. Gruntjs plugins
  4. grunt-contrib-clean
  5. grunt-wiredep
  6. gurnt-usemin

本文原创首发于网站:www.lijiaocn.com

QQ交流群

区块链实践互助QQ群:576555864

Kubernetes实践互助QQ群:947371129

Prometheus实践互助QQ群:952461804

Kong/Envoy实践互助QQ群:952503851

Ansible实践互助QQ群:955105412

Copyright @2011-2019 All rights reserved. 转载请添加原文连接,合作请加微信lijiaocn或者发送邮件: [email protected],备注网站合作 友情链接: lijiaocn github.com