吉特仓储管系统(开源)--使用Grunt压缩JS文件

2021-09-25 10:28:04

　　在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩。文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找,文章内容非常浅显。

　　一. 什么是grunt

　　　　JavaScript世界的构建工具,官网上是这么描述的,姑且这么描述,个人感觉还比较好用。官网地址: http://www.gruntjs.net/ 更多的参考资料也可以查询官网

　　二. 安装grunt

　　　　Grunt和Grunt插件是通过npm安装并管理的,npm是Node.js的一个包管理器,不理解的可以查看NodeJS 的相关资料。本文操作都是在Windows系统环境中操作,其他的操作系统命令行可能稍微有点不一样。(如果没有nodejs环境的请先安装nodejs环境)

npm install -g grunt-cli

　　　　在CMD命令窗口中输入如上命令,grunt命令就会加入到你的系统路径中,后面你就可以可以使用grunt命令构建压缩JavaScript了。

　　　　上面的命令是按照grunt-cli,但是这并不等于按照了grunt,grunt-cli用于协调调用任务的。

　　三. 项目准备

　　　　在编辑JS的时候我使用的sublime编辑器,这个编辑非常的不错,个人比较喜欢这个编辑器

　　　　如上图是在吉特仓储管理系统开发的过程中使用到的部分ＪＳ截图,在这里我们将处理如何压缩这些ＪＳ文件。在使用ｇｒｕｎｔ压缩JS的时候我们需要两个文件package.json 和 Gruntfile。

　　　　package.json 用于npm存储项目的元数据,可以设置项目的描述信息以及项目依赖的grunt以及grunt插件。

　　　　Gruntfile 可以使用Gruntfile.js或者Gruntfile.coffee，个人喜欢使用Gruntfile.js文件,这个文件用于配置和定义任务并加重Grunt插件的。

　　　　在CMD命令行中进入到JS项目对应的根目录。

　　　　在此目录下输入命令行

G:\Mui\gitwms>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gitwms)
version: (1.0.0)
description:
entry point: (index.js)
test command: ""
git repository:
keywords: gitwms
author: hechen
license: (ISC)
About to write to G:\Mui\gitwms\package.json:

{
  "name": "gitwms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "\"\""
  },
  "keywords": [
    "gitwms"
  ],
  "author": "hechen",
  "license": "ISC"
}


Is this ok? (yes) yes

初始化代码

　　　　在命令行输入npm init 后会自动生成package.json文件,生成的文件内容如下：

{
  "name": "gitwms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "\"\""
  },
  "keywords": [
    "gitwms"
  ],
  "author": "hechen",
  "license": "ISC"
}

package.json文件内容

　　　　在项目中安装grunt，使用如下的命令,如果安装成功命令行中会显示相关成功的信息。

npm install grunt --save-dev

　　　　grunt 本身不会压缩JS文件，我们需要使用grunt的插件grunt-contrib-uglify 来处理文件的压缩

npm install grunt-contrib-uglify --save-dev

　　　　安装好grunt 以及压缩的插件之后，我们会发现package.json文件内容会发生一些变化

{
  "name": "gitwms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "\"\""
  },
  "keywords": [
    "gitwms"
  ],
  "author": "hechen",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0"
  }
}

更新之后package.json

　　　　devDependencies 之后的内容发生了变化,指向了grunt的依赖。

　　　　在项目的根目录新建文件Gruntfile.js, 然后将如下代码复制到该JS文件中。

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'customer/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

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

};

配置插件文件

　　　　先不管该代码的意思,在项目根目录下执行grunt命令 (CMD命令窗口中执行)

G:\Mui\gitwms>grunt
Running "uglify:build" (uglify) task
>> Destination build/gitwms.min.js not written because src files were empty.
>> No files created.

　　　　命令行输出错误信息,没有压缩创建文件成功。这个主要是Gruntfile.js中的文件配置错误引起的

　　　　src: 'customer/<%= pkg.name %>.js', 这里找不到src 对应的目录下的文件，修改代码如下：

build: {
        src: 'customer/*.js',
        dest: 'build/<%= pkg.name %>.min.js'
}

　　　　然后再次运行grunt 命令,发现在根目录下创建了一个build文件夹，并且生成了一个gitwms.min.js 的压缩ＪＳ文件。在这里grunt压缩JS文件的操作任务成功了。

　　四. 文件被合并了

　　　　上面的操作执行成功,但是多个文件被压缩成了一个文件,我们需要每个文件压缩成一个文件。修改Gruntfile.js文件内容如下：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      /*build: {
        src: 'customer/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }*/
      my_target:{
        files:[
          {expand:true,cwd:"customer/",src:"*.js",dest:"build/",ext:".<%= pkg.version %>.min.js"},
          {expand:true,cwd:"customer/User/",src:"*.js",dest:"build/User/",ext:".<%= pkg.version %>.min.js"},
        ]
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

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

};

不同目录文件压缩配置

　　　　编辑上述代码之后再次使用grunt命令进行压缩文件,发现生成了两个目录。但是同一个目录的文件还是被压缩成了一个文件,而且查看文件名称存在较大的问题。

上面被压缩的代码并不是我们想要的,文件还是被合并了。导致这个问题的原因是JS源文件的命名 . 导致的。这里修改代码如下：

{expand:true,cwd:"customer/",src:"*.js",dest:"build/",ext:".<%= pkg.version %>.min.js",extDot:"last"},
{expand:true,cwd:"customer/User/",src:"*.js",dest:"build/User/",ext:".<%= pkg.version %>.min.js",extDot:"last"},

　　　　重新运行grunt 命令现在可以满足要求了。这里主要使用到了extDot 属性。extDot:first：表示以文件名后的第一个点后面开始作为后缀名;last：表示以文件名后的最后一个点后面开始作为后缀名。

　　　 files 中属性说明:

　　　　expand：值 true 或 false ,如果设置为true 标识后面文件名的占位符(*)都要具象到具体的文件

　　　　cwd: 需要输出的处理文件目录

　　　　src: 需要匹配的文件,和cwd相对,如果是数组形式,数组每一个item都是一个文件名(可以使用通配符)

　　　　dest:压缩生成的文件路径前缀

　　　　ext: 处理之后的文件后缀名

　　　　extDpt: first 表示源文件名的第一个. 后面的开始作为后缀名 | last 表示源文件名的最后一个. 后面的开始作为后缀名

　　　　flatten: 删除所有生成的dest的路径部分,值为boolean类型（true、false）用来指定是否保持文件目录结构,true是保持文件目录

　　五. 配置简单说明

　　　　pkg: grunt.file.readJSON('package.json')

　　　　用于读取package.json中的内容，并且可以赋值到pkg中。后面就可以使用<% %>模板字符串引用任意的配置属性。

作者：情缘
出处：http://www.cnblogs.com/qingyuan/
关于作者：从事仓库，生产软件方面的开发，在项目管理以及企业经营方面寻求发展之路
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
联系方式: 个人QQ 821865130 ; 仓储技术QQ群 88718955,142050808 ;
吉特仓储管理系统开源地址: https://github.com/hechenqingyuan/gitwms

码农公寓

相关文章