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

时间:2022-08-28 10:41:11

  在吉特仓储管理系统开发的过程中大量使用到了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压缩JS文件

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

  三. 项目准备

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

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

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

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

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

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

吉特仓储管系统(开源)--使用Grunt压缩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 的压缩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命令进行压缩文件,发现生成了两个目录。但是同一个目录的文件还是被压缩成了一个文件,而且查看文件名称存在较大的问题。

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

上面被压缩的代码并不是我们想要的,文件还是被合并了。导致这个问题的原因是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

吉特仓储管系统(开源)--使用Grunt压缩JS文件的更多相关文章

  1. 吉特仓储管系统&lpar;开源WMS&rpar;--分享两月如何做到10W&plus;的项目

    在此文开篇之处先特别申明,此文在有些人的眼中会有广告的嫌疑,但是本人不想将其作为一个广告宣传的文章,在此提到软件内容部分请大家予以谅解和包含,作为时间不算短的程序员给大家分享一些自己开发吉特仓储管理软 ...

  2. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. 吉特仓储管系统&lpar;开源WMS&rpar;--Web在线报表以及打印模板分享

    很早之前就想写这篇文章与大家分享一下自己在吉特仓储管理系统中开发打印和报表的功能,在GitHub(https://github.com/hechenqingyuan/gitwms)上公开下载的代码中很 ...

  4. grunt压缩js文件

    grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并.压缩,检查语法等. 使用grunt首先要安装node环境,nodejs官网http://node ...

  5. grunt压缩js代码

    安装node.js的环境和grunt插件在上一篇已经将过,点击这里跳到上一篇 所以我们直接从压缩插件的安装开始讲 起 1.安装uglify插件 目录结构如下: 命令行:npm install grun ...

  6. 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析

    前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...

  7. grunt 压缩js css html 合并等配置与操作详解

    module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...

  8. grunt和seajs入门之--提取依赖、合并、压缩js文件

    一.安装grunt: npm install -g grunt-cli //安装 npm install grunt –save-dev //安装Grunt最新版本到项目目录中,并将其添加到devDe ...

  9. GruntJs安装及使用入门(自定义grunt任务&comma;合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

随机推荐

  1. VisualVM通过jstatd方式远程监控远程主机

    配置好权限文件 [root@test bin]# cd $JAVA_HOME/bin [root@test bin]# vim jstatd.all.policy grant codebase &qu ...

  2. C&num;~异步编程再续~await与async引起的w3wp&period;exe崩溃-问题友好的解决

    返回目录 关于死锁的原因 理解该死锁的原因在于理解await 处理contexts的方式,默认的,当一个未完成的Task 被await的时候,当前的上下文将在该Task完成的时候重新获得并继续执行剩余 ...

  3. 数据库测试DbUnit

    DBUnit 的设计理念就是在测试之前,备份数据库,然后给对象数据库植入我们需要的准备数据,最后,在测试完毕后,读入备份数据库,回溯到测试前的状态: 摘自:DbUnit入门实战 DBUnit官网:ht ...

  4. ConvertHelper与泛型集合

    在机房重构时.我们常常会用到ConvertHelper. 它把从数据库中查询到的dateTable(也是一个暂时表)转化为泛型,然后再填充到DataGridView控件中. ConvertHelper ...

  5. WPF界面设计技巧(11)-认知流文档 &amp&semi; 小议WPF的野心

    原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心 流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更 ...

  6. EQueue - 一个C&num;写的开源分布式消息队列的总体介绍(转)

    源: EQueue - 一个C#写的开源分布式消息队列的总体介绍 EQueue - 一个纯C#写的分布式消息队列介绍2 EQueue - 详细谈一下消息持久化以及消息堆积的设计

  7. js数值使用及数组转json,转化后的json传入后台解析

    var storeArray=new Array(); $("input[name='storeid']").each(function(i){ var curStoreObj = ...

  8. nodejs&plus;express&plus;mysql 增删改查&lpar;二&rpar;

    1.最早一篇关于express框架简单的增删改查文章,http://www.cnblogs.com/zhengyeye/p/nodejs.html#3947308:意外走红博客园,无奈自己之前一直没有 ...

  9. vue加elementui开发的分页显示

    由于我的是公共引入样式表和css表所以,将公共的也写出来了(我接手的项目为基于vue开发的) 公共的index.html 引入js <script src="{MODULE_URL}s ...

  10. leetcode — longest-valid-parentheses

    import java.util.Stack; /** * Source : https://oj.leetcode.com/problems/longest-valid-parentheses/ * ...