学习使用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中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
详解vue组件之间的通信
Aug 30 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网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
php写app用的框架整理
2019/09/29 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
js闭包的用途详解
2014/11/09 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python中删除文件的程序代码
2011/03/13 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
中英双版中文教师求职信
2013/10/27 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
网络技术专业推荐信
2014/02/20 职场文书
煤矿安全协议书
2014/08/20 职场文书
车辆转让协议书
2014/09/24 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书