Grunt实现css,js,images文件压缩

了解grunt常用模块

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

下载模块文件

//package.json文件
{
  "name": "wap_lianxi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "grunt-contrib-clean": "latest",
    "grunt-contrib-imagemin": "latest",
    "grunt-contrib-less": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-uglify": "latest"
  }
}

Gruntfile.js配置压缩

module.exports = function (grunt) {
    // 项目配置
    grunt.initConfig({
        //读取package.json的内容,形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        //压缩JS
        uglify: {
            my_target: {
                options: {
                    //sourceMap: true,
                    beautify:true,//美化源代码
                    banner: '/!*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> *!/'
                },
                files: {//多个js压缩为一个 如果不想把其中的某个一起压缩可以这样写 !'**/asd.js',两个*号表示这个目录下的所有符合条件的文件
                    'demo/js/a.js': ['demo/js/**/*.js']// 前面是输出目录,后面是当前工作路径
                }
            }
        },
        //压缩css
        cssmin: {
            add_banner: {
                options:{
                    banner: '/* My minified css file */',
                    report:'min'
                },
                files:[{//一次性压缩一个文件夹中的所有js文件,但不会把多个文件压缩成一个文件
                    expand: true,
                        cwd: 'demo/style/',
                        src: ['**/*.css'],
                        dest: 'demo/style/',
                        ext: '.min.css' //表示处理后的文件后缀名
                    }
                ]
            }
        },
        imagemin:{
            dynamic:{
                options:{
                    optimizationLevel: 7,// png图片优化水平,3是默认值,取值区间0-7
                    pngquant: true
                },
                files:[{
                    expand: true, // 如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
                    cwd: "demo/images/", // 当前工作路径
                    src: ["*.{png}"], // 要出处理的文件格式(images下的所有png,jpg,gif)
                    dest: "demo/images/" // 输出目录(直接覆盖原图)
                }]
            }
        }
    });
    // 加载任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.loadNpmTasks('grunt-contrib-imagemin');
    // 发布到测试环境
    grunt.registerTask('a', ['uglify','cssmin','imagemin']);

};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值