使用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 相关文章推荐
jquery 全局AJAX事件使用代码
Nov 05 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
收音机指标测试方法及仪器
2021/03/01 无线电
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python中的格式化输出用法总结
2016/07/28 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python rstrip()方法实例详解
2018/11/11 Python
python中wheel的用法整理
2020/06/15 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
安全月宣传标语
2014/10/07 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
教师反邪教心得体会
2016/01/15 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python