学习使用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 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
vue之数据交互实例代码
Jun 16 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 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
thinkphp的静态缓存用法分析
2014/11/29 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python在线运行代码助手
2016/07/15 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
计算机个人求职信范例
2014/01/24 职场文书
小学生操行评语
2014/04/22 职场文书
社区好人好事材料
2014/12/26 职场文书
运动会新闻稿
2015/07/17 职场文书
服务行业标语口号
2015/12/26 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
2022年显卡天梯图(6月更新)
2022/06/17 数码科技