学习使用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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
js类中获取外部函数名的方法
Aug 19 Javascript
JS获取父节点方法
Aug 20 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
ES2020系列之空值合并运算符 '??'
Jul 22 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
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
10 个经典PHP函数
2013/10/17 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP实现简易计算器功能
2020/08/28 PHP
js计数器代码
2006/11/04 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
详解Django中间件执行顺序
2018/07/16 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
加热夹克:RAVEAN
2018/10/19 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
宪法宣传标语100条
2019/10/15 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python