如何用grunt压缩并合 js/css

1 使用前提: grunt是基于node 环境,所以必须先搭建node环境(这里不做详细介绍自己查)

2 入门介绍:

先安装grunt npm install -g grunt-cli

文件介绍 :package.json是依赖库文件 Gruntfile.js是执行步骤程序
package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,插件等。

{
"name": "hlcc",
"version": "v0.1.0",
"devDependencies": {

"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-cssmin": "~0.12.3",
"grunt-htmlhint": "~0.9.2"

}
}

grunt-contrib-jshint(js语法检查)、grunt-contrib-concat(js合并)、grunt-contrib-uglify(采用UglifyJS压缩js)、grunt-contrib-cssmin(Css压缩合并)、grunt-htmlhint(html语法验查)

我们配置好package.json 文件后执行 npm install 即可安装这些插件了。

插件安装完成后,查看根目录,会发现node_modules目录,包含了相应的插件目录。

clipboard.png

3 测试
新建Gruntfile.js
我们需要先创建一些文件夹,并将需要压缩的js、css 文件放入对应的文件夹里面(看下面代码里说明),注意需要给 这些文件可写的权限。 一般执行 chmod -R 777 assets dest js ,即可。

module.exports = function(grunt) {
grunt.initConfig({

 pkg: grunt.file.readJSON('package.json'),
 concat: {
     options: {
         separator: ';',
         stripBanners: true
     },
     dist: {
         src: [
             "js/config.js",
             "js/smeite.js",
             "js/index.js"
         ],
         dest: "assets/js/default.js"
     }
 },
 uglify: {
     options: {
     },
     dist: {
         files: {
             'assets/js/default.min.js': 'assets/js/default.js'
         }
     }
 },
 cssmin: {
     options: {
         keepSpecialComments: 0
     },
     compress: {
         files: {
             'assets/css/default.css': [
                 "css/global.css",
                 "css/pops.css",
                 "css/index.css"
             ]
         }
     }
 }

});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
};

也可以单独压缩js和css,不进行合并,例如:

module.exports = function (grunt) {

// 构建任务配置
grunt.initConfig({

    //读取package.json的内容,形成个json数据
    pkg: grunt.file.readJSON('package.json'),

    //压缩js
    uglify: {
        //文件头部输出信息
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        my_target: {
            files: [
                {
                    expand: true,
                    //相对路径
                    cwd: 'js/',
                    src: '*.js',
                   //src: ['**/*.js', '!**/*.min.js'],  //不包含某个js,某个文件夹下的js
                    dest: 'dest/js/',
                    rename: function (dest, src) {  
                              var folder = src.substring(0, src.lastIndexOf('/'));  
                              var filename = src.substring(src.lastIndexOf('/'), src.length);  
                              //  var filename=src;  
                              filename = filename.substring(0, filename.lastIndexOf('.'));  
                              var fileresult=dest + folder + filename + '.min.js';  
                              grunt.log.writeln("现处理文件:"+src+"  处理后文件:"+fileresult);  

                              return fileresult;  
                              //return  filename + '.min.js';  
                          } 
                }
            ]
        }
    },

    //压缩css
    cssmin: {
        //文件头部输出信息
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
            //美化代码
            beautify: {
                //中文ascii化,非常有用!防止中文乱码的神配置
                ascii_only: true
            }
        },
        my_target: {
            files: [
                {
                    expand: true,
                    //相对路径
                    cwd: 'css/',
                    src: '*.css',
                    dest: 'dest/css/',
                    rename: function (dest, src) {  
                            var folder = src.substring(0, src.lastIndexOf('/'));  
                            var filename = src.substring(src.lastIndexOf('/'), src.length);  
                            //  var filename=src;  
                            filename = filename.substring(0, filename.lastIndexOf('.'));  
                            var fileresult=dest + folder + filename + '.min.css';  
                            grunt.log.writeln("现处理文件:"+src+"  处理后文件:"+fileresult);  

                            return fileresult;  
                          //return  filename + '.min.js';
                            }
                }
            ]
        }
    }

});

// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');

// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);

};

注:一些参数的含义:
expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。

cwd:需要处理的文件(input)所在的目录。

src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。

dest:表示处理后的文件名或所在目录。

ext:表示处理后的文件后缀名。

进入到项目根目录 执行 grunt 就会按Gruntfile配置的文件进行压缩合并

也可以单独执行 例执行js压缩命令:grunt uglify

css压缩命令 grunt cssmin

如有疑问联系 1343948033@qq .com


贺兰丛丛
关于php、liunx、nginx、js 方面的技术文章。

放养程序员

106 声望
9 粉丝
0 条评论
推荐阅读
laravel通用化的CURD
说明 非常高效的处理laravel中curd的操作 安装 composer require shencongcong/laravel-curd ~1.0 laravel项目的 config/app.php 注册 ServiceProvider {代码...} 使用 {代码...} github地址

hlcc阅读 1.6k

反编译微信小程序获取小程序前端源码wxapkg
研究反编译的原因就是我自己辛苦了半个月写的小程序,忘记备份放在桌面,心急体验Win11系统 重装系统忘记备份源码,后悔莫及。 后来网上找了反编译的教程,反编译已经上线了的小程序 于是自己尝试了一下,真的可...

TANKING12阅读 10k评论 7

封面图
PDF 预览和下载你是怎么实现的?
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,PDF 类型文件的来源又包括 H5 移动端 和 PC 端,而针对这两个不同端的处理会有些许不同,下文会有所提及。

熊的猫7阅读 3.7k评论 1

封面图
Just for fun——C#应用和Nodejs通讯
进程通信常见的进程通讯的方法有:管道(Pipe)命名管道信号消息队列其他管道是比较简单基础的技术了,所以看看它。Node IPC支持Node官方文档中Net模块写着:IPC SupportThe net module supports IPC with named ...

pigLoveRabbit3阅读 6.8k评论 2

「过程详解」async await综合题
如果你之前跟我一样一直对async await熟悉又陌生的话(熟悉是可能每天都在用,陌生是针对一些组合题又丈二和尚摸不着头脑),不妨可以边看边练,总结规律,相信会逐渐清晰并有所得。本文对每个案例都详细描述了代...

wuwhs5阅读 1.2k

封面图
cligetter|一款快速生成 Cli工具 开发模版的脚手架
近年来 cli工具 的开发,对于不断发展的前端生态来说,似乎也逐渐成为工程师们的必备技能。其实开发一个 cli工具 并不难,但对于前端的同学可能存在一点认知上的小门槛,特别是对于刚开始接触 cli 脚手架工具开发...

木木剑光3阅读 636

一个灵活的 Node.js 多功能爬虫库 —— x-crawl
x-crawl · x-crawl 是一个灵活的 Node.js 多功能爬虫库。灵活的使用方式和众多的功能可以帮助您快速、安全、稳定地爬取页面、接口以及文件。如果你也喜欢 x-crawl ,可以给 x-crawl 存储库 点个 star 支持一下,...

coderhxl2阅读 1.9k评论 2

封面图

放养程序员

106 声望
9 粉丝
宣传栏