学习使用grunt来打包JavaScript和CSS程序的教程


Posted in Javascript onJanuary 04, 2016

Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建工具已经成为可能。

Grunt.js是基于Node.js的自动化任务运行器。Grunt.js结合NPM的包依赖管理,完全可以媲美Maven。Grunt.js天然适合前端应用程序的构建——不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建。越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQuery项目。

Grunt的生态系统在迅速的成长,目前已经有上百种插件发布在NPM上可供选择。同时,任何人都可以方便的发布自己的插件到NPM上供其他人使用。

Grunt没有像Maven那样强调构建的生命周期,各种任务的执行顺序可以随意配置。Grunt本身仅是一个执行器,大量的功能都存在于NPM管理的插件中。特别是以grunt-contrib-开头的核心插件,覆盖了大部分的核心功能,比如handlebars,jade,less,compass,jshint,jasmine,clean,concat,minify,copy,uglify,watch,minify,uglify等。

通过提供通用的接口以进行代码规范检验(Lint)、合并、压缩、测试及版本控制等任务,Grunt使入门门槛大大降低了。

一,安装nodejs,grunt,以及grunt插件
1,安装nodejs
下载地址:https://nodejs.org/download/

2,安装grunt,以及插件

npm install grunt -g  //安装grunt,-g全局变量 
npm install grunt-cli -g //安装grunt命令行 
npm install grunt --save-dev  //安装grunt,--save-dev保存到安装目录 
npm install grunt-cli --save-dev //安装grunt命令行 
npm install grunt-contrib-jshint --save-dev //js语法检测插件 
npm install grunt-contrib-concat --save-dev //js合并插件 
npm install grunt-contrib-uglify --save-dev //js压缩插件 
npm install grunt-contrib-cssmin --save-dev //CSS压缩插件

grunt和grunt-cli,-g和--save-dev都安装一下,建议这样,省得出错。
3,创建工作目录
当上面的安装都结束后,node_modules里面就包含了上面安装的插件,将nodejs安装目录中的node_modules,copy到新的目录中,并创建Gruntfile.js,package.json,
在这里要注意一点,Gruntfile.js,package.json一定要与这个node_modules同一目录下,不然在调用grunt插件的时候会报错的,例如:

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

如果你没有装grunt-contrib-uglify插件,也会报这个错误。

二,创建Gruntfile.js和package.json
1,package.json

{ 
 "name": "jstest", 
 "file": "function", 
 "version": "0.1.0", 
 "devDependencies": { 
 "grunt": "~0.4.5", 
 "grunt-contrib-jshint": "~0.11.3", //后面的数字是版本号,从各个插件目录下的package.json能找到 
 "grunt-contrib-concat": "~0.5.1", 
 "grunt-contrib-uglify": "~0.9.2", 
 "grunt-contrib-cssmin": "~0.14.0" 
 } 
}

2,Gruntfile.js

module.exports = function (grunt) { 
 // grunt配置 
 grunt.initConfig({ 
 pkg: grunt.file.readJSON('package.json'), 
 concat: { 
  options: { 
  separator: ';' 
  }, 
  dist: { 
  src: ['js_s/function.js', 'js_s/jquery.validate.js'], 
  dest: 'js_d/main.js' //合并不压缩 
  } 
 }, 
 uglify: { 
  options: { 
  banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' //文件顶部的注释,可自定义 
  }, 
  build: { //将package.json中的file对应的文件,进行压缩并重命名 
  src: 'js_s/<%= pkg.file %>.js',  //注意空格,官方配置例子是pkg.name 
  dest: 'js_d/<%= pkg.file %>.min.js' //注意空格,官方配置例子是pkg.name 
  }, 
  buildall: {//将js_s文件夹下的所有js文件,压缩后,放到js_d文件夹中,文件名不变 
  files: [{ 
  expand:true, 
  cwd:'js_s',//js目录下 
  src:'**/*.js',//所有js文件 
  dest: 'js_d'//输出到此目录下 
  }] 
  }, 
  hebin: {//将function.js和jquery.validate.js,合并,并压缩成main.min.js 
  files: { 
   'js_d/main.min.js': ['js_s/function.js', 'js_s/jquery.validate.js'] 
  } 
  }, 
  ymain: {//将main.js压缩成main1.min.js 
  src: 'js_d/main.js', 
  dest: 'js_d/main1.min.js' 
  } 
 }, 
 jshint: { //检查,function.js是不是有语法错误 
  all: ['js_s/function.js'] 
 }, 
 cssmin: { 
  combine: { 
    files: { //将css_s文件夹下的css文件合成一个 
     'css_d/main.css': ['css_s/*.css'] 
    } 
   }, 
  minify: { 
    options: { 
     keepSpecialComments: 0, /* 删除所有注释 */ 
     banner: '/* minified css file */' 
    }, 
    files: { //单个CSS文件压缩 
     'css_d/index.min.css': ['css_s/index.css'] 
    } 
   }, 
  test: {//按文件夹下的所有CSS文件,压缩后,放到新的文件夹中,文件名不变 
    files: [{ 
   expand:true, 
   cwd:'css_s',//css目录下 
   src:'**/*.css',//所有css文件 
   dest: 'css_d'//输出到此目录下 
   }] 
   } 
  } 
 }); 
 // 加载插件 
 grunt.loadNpmTasks('grunt-contrib-uglify'); 
 grunt.loadNpmTasks('grunt-contrib-concat'); 
 grunt.loadNpmTasks('grunt-contrib-jshint'); 
 grunt.loadNpmTasks('grunt-contrib-cssmin'); 
 
 // 是否调用插件功能 
 //grunt.registerTask('default', ['concat','uglify','jshint','cssmin']); 
 // grunt.registerTask('default', ['uglify']); 
 // grunt.registerTask('default', ['concat']); 
 //grunt.registerTask('default', ['jshint']); 
 grunt.registerTask('default', ['cssmin']); //CSSMIN插件的功能能用,其他功能都不起作用 
}

配置文件好了以后,在命令行下,输入grunt就可以合并压缩了。上面的测试文件,基本上都是围绕着,合并与压缩来的,对于做WEB前端的来说,这个还是比较重要的。
从压缩效果来说,JS的压缩效果比较理想,CSS一般,当然,这根写的代码有关系。

学习使用grunt来打包JavaScript和CSS程序的教程

Javascript 相关文章推荐
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
Bootstrap表单布局
Jul 19 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 #Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 #Javascript
深入浅析AngularJS中的module(模块)
Jan 04 #Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 #Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 #Javascript
详解Bootstrap glyphicons字体图标
Jan 04 #Javascript
详解Bootstrap按钮
Jan 04 #Javascript
You might like
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python语言基本语句用法总结
2019/06/11 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
编辑找工作求职信分享
2014/01/03 职场文书
社区庆八一活动方案
2014/02/02 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
政协调研汇报材料
2014/08/15 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
北京颐和园导游词
2015/01/30 职场文书
司机岗位职责范本
2015/04/10 职场文书
学历证明范文
2015/06/16 职场文书
导游词之太湖
2019/10/08 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
python 如何做一个识别率百分百的OCR
2021/05/29 Python