生成环境中grunt的压缩使用

本文介绍了一个基于Grunt的任务自动化流程,用于前端资源的构建、优化和部署。包括HTML、CSS、JavaScript语法检查,图片压缩,代码合并及压缩等操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.package.json

{
  "name": "fs-service-mweb",
  "common":"src/main/webapp/static/themes/common",
  "mweb":"src/main/webapp/static/themes/mweb",
  "wxres":"src/main/webapp/static/themes/wxres",
  "version": "1.0.0",
  "description": "fs-service-mweb",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "grunt": "^1.0.1"
  },
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-livereload": "*",
    "grunt-htmlhint":"*",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-csslint":"*",
    "grunt-contrib-concat":"*",
    "grunt-contrib-htmlmin":"*",
    "grunt-contrib-imagemin":"*",
    "grunt-contrib-cssmin":"*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch":"*",
    "matchdep":"*"
  },
  "keywords": [
    "kxll",
    "mweb"
  ],
  "author": "cheonghu",
  "license": "ISC"
}

2.gruntfile.js

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),
        htmlhint: {
            htmls: {
                options: {
                    'tag-pair': true
                },
                src: ['<%=pkg.mweb%>/templates/dev/**/*.html']
            }
        },
        csslint: {
            /* 检查 CSS 语法 */
            src: ['<%=pkg.mweb%>/css/dev/**/*.css']
        },
        jshint: {
            /* 检查 js 语法 */
            all: ['Gruntfile.js','<%=pkg.common%>/plugin/**/*.js',
                 '<%=pkg.common%>/js/**/*.js',
                '<%=pkg.mweb%>/js/dev/**/*.js']
        },
        imagemin: {
            /* 压缩优化图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3
                },
                files: [
                    {
                        expand: true,
                        cwd: '<%=pkg.mweb%>/images/',
                        src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
                        dest: '<%=pkg.mweb%>/images/' // 优化后的图片保存位置,默认覆盖
                    },
                    {
                        expand: true,
                        cwd: '<%=pkg.wxres%>/',
                        src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
                        dest: '<%=pkg.wxres%>/' // 优化后的图片保存位置,默认覆盖
                    },

                ]
            }
        },
        concat: {
            /* 合并 CSS 文件 */
            main_css: {
                src: [
                    '<%=pkg.mweb%>/css/dev/reset.css',
                    '<%=pkg.mweb%>/css/dev/stylesd.css',
                ],
                /* 根据目录下文件情况配置 */
                dest: '<%=pkg.mweb%>/css/dev/main.css'
            },
            /* 合并 js 文件 */
            common_js:{//插件需要指定合成顺序
                src: ['<%=pkg.common%>/plugin/angular/angular.min.js',
                    '<%=pkg.common%>/plugin/angular/angular-route.min.js',
                    '<%=pkg.common%>/plugin/angular/angular-touch.min.js',
                    '<%=pkg.common%>/plugin/angular/sanitize.min.js',
                    '<%=pkg.common%>/js/dev/boot.js',
                    '<%=pkg.common%>/js/dev/wx_init.js',
                    '<%=pkg.common%>/js/dev/locache.js',
                    '<%=pkg.common%>/js/dev/base64.js',
                ],
                /* 根据目录下文件情况配置 */
                dest: '<%=pkg.common%>/js/dev/common.js'
            },
        },
        htmlmin: {       //html 压缩                              // Task
            dist: {                                      // Target
                options: {                                 // Target options
                    removeComments: true,
                    collapseWhitespace: true,
                    processScripts:['text/ng-template'],
                    ignoreCustomComments:[ /^!/ ]
                },
                files:  [{
                    expand: true,
                    cwd: '<%=pkg.mweb%>/templates/dev/',
                    src: '**/*.html',
                    dest: '<%=pkg.mweb%>/templates/min/'
                }]
            },
        },
        cssmin: {
            /*压缩 CSS 文件为 .css */
            options: {
                keepSpecialComments: 0 /* 移除 CSS 文件中的所有注释 */
            },
            minify: {
                files: [
                    {
                    expand: true,
                    cwd:'<%=pkg.mweb%>/css/dev/',
                    src: ['**/*.css'],
                    dest: '<%=pkg.mweb%>/css/min/',
                    ext: '.css'
                },
                ]
            }
        },
        uglify: {
            minjs: {
                files: [
                    {
                        expand: true,     // Enable dynamic expansion.
                        cwd: '<%=pkg.common%>/js/dev/',      // Src matches are relative to this path.
                        src: ['common.js'], // Actual pattern(s) to match.
                        dest: '<%=pkg.common%>/js/min/',   // Destination path prefix.
                        ext: '.js',   // Dest filepaths will have this extension.
                    },
                    {
                        expand: true,     // Enable dynamic expansion.
                        cwd: '<%=pkg.mweb%>/js/dev/',      // Src matches are relative to this path.
                        src: ['**/*.js'], // Actual pattern(s) to match.
                        dest: '<%=pkg.mweb%>/js/min/',   // Destination path prefix.
                        ext: '.js',   // Dest filepaths will have this extension.
                    },
                ],
            },
        },
        watch: {
            /* 监控文件变化并执行相应任务 */
            img: {
                files: ['<%=pkg.mweb%>/images/**/*.{png,jpg,jpeg}'],
                tasks:['imageTask'],
                options: {
                    livereload: true
                }
            },
            css: {
                options: {
                    event: ['changed', 'added'],
                    livereload: true
                },
                tasks:['cssTask'],
                files: [
                    '<%=pkg.mweb%>/css/dev/**/*.css',
                ]
            },
            js: {
                options: {
                    livereload: true
                },
                tasks:['jsTask'],
                files: ['Gruntfile.js','<%=pkg.mweb%>/js/dev/**/*.js',
                '<%=pkg.common%>/js/dev/**/*.js']
            },
            html: {
                options: {
                    livereload: true
                },
                tasks:['htmlTask'],
                files: ['<%=pkg.mweb%>/template/**/*.html']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-livereload');
    grunt.loadNpmTasks('grunt-htmlhint');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');


    // 定义默认任务
    grunt.registerTask('default', ['imageTask','htmlTask','cssTask','jsTask']);
    //注册监听任务
    grunt.registerTask('watchTask', ['watch']);
    grunt.registerTask('imageTask', ['imagemin']);
    grunt.registerTask('htmlTask',['htmlhint','htmlmin']);
    grunt.registerTask('jsTask', ['jshint','concat:common_js','uglify']);
    grunt.registerTask('cssTask', ['csslint','concat:main_css','cssmin']);
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值