grunt 单独压缩多个js和css文件

最新推荐文章于 2021-08-04 08:19:52 发布

miyacnn

最新推荐文章于 2021-08-04 08:19:52 发布

阅读量163

点赞数

分类专栏： JavaScript jQuery web前端技术 Nodejs 文章标签： grunt js 压缩 ViewUI

web前端技术同时被 3 个专栏收录

58 篇文章 0 订阅

订阅专栏

JavaScript

53 篇文章 0 订阅

订阅专栏

jQuery

15 篇文章 0 订阅

订阅专栏

使用grunt来压缩前端js，css文件

因为最近做的客户端本地项目有用到十几个js，js提交之前都需要压缩。用grunt压缩已经不是什么新鲜事了，，之前的项目用的是别人给我配置好的。所以也没有去深究。这次类型不同了不需要去上传只需文件压缩。所以下午自己去研究了下grunt确实很好用。

我们这里需要对js和css单独压缩。网上很多都是合并压缩。本人觉得多个js合并之后会存在隐形问题。还是喜欢单独压缩。下面的介绍就只做多个文件单独压缩。

一，什么是grunt，

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查

对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件

二，准备阶段

1，nodejs环境

因为grunt是基于nodeJs的，所以首先各位需要安装nodeJS环境

安装nodejs。

安装好之后检查

打开cmd

输入：node -v

输出：v0.10.28(这个是我的版本)

三，安装grunt

有了nodeJs环境后，我们便可以开始搞grunt了，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI
官方推荐在全局安装CLI（grunt的命令行接口）

输入：npm install -g grunt-cli

这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是

每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库
然后应用我们项目中的GruntFile配置，并执行任务

ps这里安装好后一般在我们的C:\Users\SOS\AppData\Roaming\npm\node_modules

会看到grunt-cli文件

四，添加package.json和Gruntfile.js文件

package.json

代码如下：

{
  "name": "test",
  "version": "0.1.0",
  "description": "test",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

Gruntfile.js

代码如下：

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',
                        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']);

};

这个里面主要对js和css进行批量压缩

会依赖grunt-contrib-uglify和 grunt-contrib-cssmin这两个插件

做好后，我们需要在我们的项目的根目录下运行命令

输入：npm install

会将相关的文件下载下来

这个时候我们的根目录下就会多个文件名字叫node_modules

这一步我们就可以压缩

进入根目录输入命令grunt回车就ok

这个时候如果输出有报错可能说：“grunt-contrib-cssmin”notfound

那我们要把 grunt-contrib-cssmin插件下载下来

输入命令：npm install grunt-contrib-cssmin

这个时候如果输出有报错可能说：Fatal error :Unable to find local grunt