使用grunt合并压缩js和css文件的方法


Posted in Javascript onMarch 02, 2017

需要了解的知识:

1、nodejs的安装与命令行使用

2、nodejs安装应用

3、grunt的初步了解

本文已假定读者已经熟悉以上知识。

好,我们继续:

任务1:将src目录下的所有zepto及插件合并,并压缩。

--src/
  ajax.js
  assets.js
  callbacks.js
  data.js
  deferred.js
  detect.js
  event.js
  form.js
  fx.js
  fx_methods.js
  gesture.js
  ie.js
  ios3.js
  selector.js
  stack.js
  touch.js
  zepto.js

目录结构:

dist/
node_modules/
src/
Gruntfile.js
package.json
package.json是依赖库文件
Gruntfile.js是执行步骤程序

一、js合并压缩

第一次需要先安装grunt。执行 npm install -g grunt-cli 进行安装。如果已经安装,可以忽略。

1.package.json文件

{
 "name": "demo",
 "file": "zepto",
 "version": "0.1.0",
 "description": "demo",
 "license": "MIT",
 "devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-jshint": "~0.6.3",
  "grunt-contrib-concat": "~0.5.0",
  "grunt-contrib-uglify": "~0.2.1",
  "grunt-contrib-requirejs": "~0.4.1",
  "grunt-contrib-copy": "~0.4.1",
  "grunt-contrib-clean": "~0.5.0",
  "grunt-strip": "~0.2.1"
 },
 "dependencies": {
  "express": "3.x"
 }
}

 2.Gruntfile.js

module.exports = function (grunt) {
 grunt.initConfig({
 concat: {
  options: {
  },
  dist: {
   src: ['src/**/*.js'],//src文件夹下包括子文件夹下的所有文件
   dest: 'dist/built.js'//合并文件在dist下名为built.js的文件
  }
 },
 uglify: {
   build: {
    src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件
    dest: 'dist/built.min.js'//压缩文件为built.min.js
   }
  }
});
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.registerTask('default', ['concat','uglify']);
}

执行步骤:

(1)安装依赖,已安装可以忽略: npm install 。将会下载依赖的文件到node_modules目录。

(2)执行合并压缩: grunt

>grunt
Running "concat:dist" (concat) task
File dist/built.js created.
Running "uglify:build" (uglify) task
File "dist/built.min.js" created.
Done, without errors.

将会在dist目录生成

built.js
built.min.js

任务2:将src/css目录下的所有css文件合并,并压缩。

二、对CSS进行合并压缩

需要安装grunt-css。执行 npm install grunt-css 安装。安装成功,下载到 node_modules/grunt-css 。如果已经安装,可以忽略。

1、package.json同上;

2、Gruntfile.js如下:

module.exports = function (grunt) {
 grunt.initConfig({
 concat: {//css文件合并
  css: {
   src: ['src/css/*.css'],//当前grunt项目中路径下的src/css目录下的所有css文件
   dest: 'dist/all.css' //生成到grunt项目路径下的dist文件夹下为all.css
  }
 },
 cssmin: { //css文件压缩
   css: {
    src: 'dist/all.css',//将之前的all.css
    dest: 'dist/all.min.css' //压缩
   }
  }
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.registerTask('default', ['concat','cssmin']);
}

参考:

1、 Grunt中文网

http://www.gruntjs.net/getting-started

以上所述是小编给大家介绍的使用grunt合并压缩js和css文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
javascript实现回到顶部特效
May 06 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
详解VueJs中的V-bind指令
May 03 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 #Javascript
浅谈Vue.js
Mar 02 #Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 #Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 #Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 #Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 #Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 #Javascript
You might like
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python变量类型知识点总结
2019/02/18 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
领导班子四风问题对照检查材料
2014/09/27 职场文书
运动与健康自我评价
2015/03/09 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
导游词之山海关
2019/12/10 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server