学习使用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的拖动布局插件
Nov 25 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
实现vuex原理的示例
Oct 21 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 calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
python开发之list操作实例分析
2016/02/22 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python3安装speech语音模块的方法
2018/12/24 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
问卷调查计划书
2014/01/10 职场文书
科级干部考察材料
2014/02/15 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
小学毕业教师寄语
2019/06/21 职场文书