Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

来源：互联网发布：免费x站最新域名网站编辑：程序博客网时间：2024/06/07 22:36

grunt.initConfig方法

用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：

expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
cwd：需要处理的文件（input）所在的目录。
src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
dest：表示处理后的文件名或所在目录。
ext：表示处理后的文件后缀名。

grunt常用函数说明：

grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组，表示该任务需要依次使用的模块。

grunt常用模块：

grunt-contrib-clean：删除文件。
grunt-contrib-compass：使用compass编译sass文件。
grunt-contrib-concat：合并文件。
grunt-contrib-copy：复制文件。
grunt-contrib-cssmin：压缩以及合并CSS文件。
grunt-contrib-imagemin：图像压缩模块。
grunt-contrib-jshint：检查JavaScript语法。
grunt-contrib-uglify：压缩以及合并JavaScript文件。
grunt-contrib-watch：监视文件变动，做出相应动作。

package.json 包依赖关系：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "name": "grunt-study",
  "version": "1.0.0",
  "description": "study",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/hubcarl"
  },
  "devDependencies":{
    "matchdep": "latest",
    "shelljs": "latest",
    "ngmshell": "latest",
    "grunt": "latest",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-copy": "latest",
    "grunt-contrib-connect": "latest",
    "grunt-contrib-htmlmin": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-imagemin": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-usemin": "latest",
    "connect-livereload": "latest"
  },
  "keywords": [
    "grunt"
  ],
  "author": "bluesky",
  "license": "BSD-2-Clause",
  "bugs": {
    "url": "https://github.com/hubcarl"
  }
}

Gruntfile.js配置css、image、javascript、html压缩

module.exports = function (grunt) {  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);  grunt.initConfig({    //清除目录    clean: {      all: ['dist/html/**', 'dist/*.*'],      image: 'dist/html/images',      css: 'dist/html/css',      html: 'dist/html/**/*'    },    copy: {      src: {        files: [          {expand: true, cwd: 'src', src: ['*.html'], dest: 'dist/html'}        ]      },      image: {        files: [          {expand: true, cwd: 'src', src: ['images/*.{png,jpg,jpeg,gif}'], dest: 'dist/html'}        ]      }    },    // 文件合并    concat: {      options: {        separator: ';',        stripBanners: true      },      js: {        src: [          "src/js/*.js"        ],        dest: "dist/html/js/app.js"      },      css:{        src: [          "src/css/*.css"        ],        dest: "dist/html/css/main.css"      }    },    //压缩JS    uglify: {      prod: {        options: {          mangle: {            except: ['require', 'exports', 'module', 'window']          },          compress: {            global_defs: {              PROD: true            },            dead_code: true,            pure_funcs: [              "console.log",              "console.info"            ]          }        },        files: [{            expand: true,            cwd: 'dist/html',            src: ['js/*.js', '!js/*.min.js'],            dest: 'dist/html'        }]      }    },    //压缩CSS    cssmin: {      prod: {        options: {          report: 'gzip'        },        files: [          {            expand: true,            cwd: 'dist/html',            src: ['css/*.css'],            dest: 'dist/html'          }        ]      }    },    //压缩图片    imagemin: {      prod: {        options: {          optimizationLevel: 7,          pngquant: true        },        files: [          {expand: true, cwd: 'dist/html', src: ['images/*.{png,jpg,jpeg,gif,webp,svg}'], dest: 'dist/html'}        ]      }    },    // 处理html中css、js 引入合并问题    usemin: {      html: 'dist/html/*.html'    },    //压缩HTML    htmlmin: {      options: {        removeComments: true,        removeCommentsFromCDATA: true,        collapseWhitespace: true,        collapseBooleanAttributes: true,        removeAttributeQuotes: true,        removeRedundantAttributes: true,        useShortDoctype: true,        removeEmptyAttributes: true,        removeOptionalTags: true      },      html: {        files: [          {expand: true, cwd: 'dist/html', src: ['*.html'], dest: 'dist/html'}        ]      }    }  });  grunt.registerTask('prod', [    'copy',                 //复制文件    'concat',               //合并文件    'imagemin',             //图片压缩    'cssmin',               //CSS压缩    'uglify',               //JS压缩    'usemin',               //HTML处理    'htmlmin'               //HTML压缩  ]);  grunt.registerTask('publish', ['clean', 'prod']);};

index.html发布之前内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>Grunt 测试</title>
    <meta charset="utf-8">
    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/web.css">
    <!-- endbuild -->
 
    <!-- build:js js/main.js -->
    <script src="js/zepto.js"></script>
    <script src="js/common.js"></script>
    <script src="js/service.js"></script>
    <!-- endbuild -->
</head>
<body>
<p></p>
Hello,Grunt!
</body>
</html>

执行grunt publish之后：

<!DOCTYPE html><html><head><title>Grunt 测试</title><meta charset=utf-8><link rel=stylesheet href=css/main.css><script src=js/main.js></script><body><p></p>Hello,Grunt<body><html>

0 0