使用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_09_Function与Object
Oct 16 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
Vue中实现权限控制的方法示例
Jun 07 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的知识
2006/11/17 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
php实现简单加入购物车功能
2017/03/07 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
总结js函数相关知识点
2018/02/27 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python补齐字符串长度的实例
2018/11/15 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
用python发送微信消息
2020/12/21 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
实习医生自我评价
2013/09/22 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python