使用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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
javascript实现前端分页效果
Jun 24 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
TypeScript入门-接口
2017/03/30 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
浅谈React高阶组件
2018/03/28 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
批处理与python代码混合编程的方法
2016/05/19 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python类的继承用法示例
2019/01/31 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python入门之井字棋小游戏
2020/03/05 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
J2EE面试题
2016/03/14 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
简历的自我评价
2014/02/03 职场文书
健康家庭事迹材料
2014/05/02 职场文书
银行服务理念口号
2015/12/25 职场文书