grunt和seajs入门之--提取依赖、合并、压缩js文件
一、安装grunt:
npm install -g grunt-cli //安装
npm install grunt –save-dev //安装Grunt最新版本到项目目录中,并将其添加到devDependencies内
grunt –version //出现grunt -cli 和 grunt的版本号即安装成功
二、配置packge.json文件:
【代码中去掉注释】
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
transport: {
webqq: {
files: {
//零时文件夹 提取依赖的文件
".build": ["main.js","range.js","scale.js","drag.js"]
}
}
},
concat: {
webqq: {
files: {
//合并后的新文件
"dist/main.js": [".build/main.js",".build/range.js",".build/scale.js",".build/drag.js"]
}
}
},
uglify: {
webqq: {
files: {
//压缩的文件
"dist/main.min.js": "dist/main.js"
}
}
}
});
//加载插件
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['transport','concat','uglify']);
};
};
四、在命令行输入:
grunt
就实现了合并,压缩的操作;在dist目录下找到相应的文件。
grunt和seajs入门之--提取依赖、合并、压缩js文件的更多相关文章
- GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)
一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...
- 如何使用grunt压缩js文件
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 吉特仓储管系统(开源)--使用Grunt压缩JS文件
在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找, ...
- asp.net core合并压缩资源文件引发的学习之旅
0. 在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www. ...
- uglifyjs 合并压缩 js, clean-css 合并压缩css
本文主要介绍如何通过CLI命令行(也就是终端或者cmd打开的那个shell窗口)实现 js和 css 的合并压缩. uglifyjs 合并压缩 js: 1.安装node 这一步就不多说了,下载node ...
- asp.net core合并压缩资源文件(转载)
在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www.cnb ...
- 使用grunt合并压缩js、css文件
需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...
- 简单使用grunt、bower工具合并压缩js和css
前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些 ...
- grunt 合并压缩js和css文件(二)
具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...
随机推荐
- Spring AOP(转载)
此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求,仔细思考之后,觉得采用AOP 来解决.一方面是为了以更加灵活的方式来解决问题,另一方 ...
- CentOS系统时间修改
1. 实体机器上安装CentOS $date -s '2015-03-03 13:34:00' 2. 虚拟机上安装的CentOS #查看系统时间和硬件时间 date hwclock --show #设 ...
- 基于注解的Sping AOP详解
一.创建基础业务 package com.kang.sping.aop.service; import org.springframework.stereotype.Service; //使用注解@S ...
- 虚拟化(五):vsphere高可用群集与容错(存储DRS是一种可用于将多个数据存储作为单个数据存储群集进行管理的功能)
vsphere高级功能需要vcenter server和共享存储的支持才能实现.vsphere的高级功能有 vmotion.storage vmotion.vsphere HA.vsphere DRS ...
- 2017NOIP游记 (格式有点炸)
NOIP游记 作者:一只小蒟蒻 时间可真快呀!还记得我第一次接触信息竞赛时,hello world都要调好久,不知不觉就考完了2017noip,自我感觉良好(虽然还是有很多不足). 这两个月的闭关,让 ...
- 设置port转发来訪问Virtualbox里linux中的站点
上一篇中我们讲到怎么设置virtuabox来通过SSH登录机器. 相同.我们也能够依照上一篇内容中的介绍,设置port转发,来訪问虚拟linux系统已经搭建的站点: 1.设置port转发: water ...
- [自动化平台系列] - 初次使用 Macaca-前端自动化测试(2)
接一下来讲一讲api的使用 http://macacajs.github.io/macaca-wd/api/ var _config = { //本程序的host host: 'http://te ...
- WebViewJavascriptBridge的简单应用
原文链接:http://www.jianshu.com/p/ca496cb680fe前言 当下,很多APP里面都会有HTML5网页,我们除了简单的用WebView加载显示外,很多情况下,我们还需要和W ...
- CORS 理解(不要那么多术语)
摘要 谈到跨域,不论前端还是后端,多少有点谈虎色变,面试中也常会问到这些问题,浏览器和服务器端到底怎么做才能跨域,他们都做了什么? 同源 vs 跨域 同源,字面意义是相同的源头,即同一个web服务器( ...
- hihocoder #1062 : 最近公共祖先·一(小数据量 map+set模拟+标记检查 *【模板】思路 )
#1062 : 最近公共祖先·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho最近发现了一个神奇的网站!虽然还不够像58同城那样神奇,但这个网站仍然让小Ho乐在 ...