grunt 压缩js css html 合并等配置与操作详解

module.exports = function(grunt){

    //1.引入

    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.loadNpmTasks('grunt-contrib-htmlmin'); //2.设置任务:

    grunt.initConfig({

//        //压缩CSS

        cssmin:{

            yasuo:{

                options:{

                    mangle:false

                },

                expand: true,

                cwd: 'css',//压缩那个文件夹里的文件

                src:'*.css',//压缩那个文件

                dest:'yscss',放压缩后文件的文件夹

                ext:'.min.css'压缩后文件的的名字

            }

        },

//        //压缩HTML

        htmlmin:{

            options: {

                    removeComments: true, //移除注释

                    removeCommentsFromCDATA: true,//移除来自字符数据的注释

                    collapseWhitespace: true,//无用空格

                    collapseBooleanAttributes: true,//失败的布尔属性

                    removeAttributeQuotes: true,//移除属性引号      有些属性不可移走引号

                    removeRedundantAttributes: true,//移除多余的属性

                    useShortDoctype: true,//使用短的跟元素

                    removeEmptyAttributes: true,//移除空的属性

                    removeOptionalTags: true//移除可选附加标签

                  },

            yasuo:{

                expand: true,

                cwd: 'index',

                src: ['*.html'],

                dest: 'yshtml'

            }

        }

    });

    //设置默认任务

    grunt.registerTask('default',['cssmin','htmlmin']);

}

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 包依赖关系：

{

  "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"

  }

}

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发布之前内容：

<!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>

巴特西

grunt 压缩js css html 合并等配置与操作详解

最新文章

热门文章