一、安装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文件的更多相关文章

  1. GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

  2. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. 吉特仓储管系统(开源)--使用Grunt压缩JS文件

    在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找, ...

  4. asp.net core合并压缩资源文件引发的学习之旅

    0. 在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www. ...

  5. uglifyjs 合并压缩 js, clean-css 合并压缩css

    本文主要介绍如何通过CLI命令行(也就是终端或者cmd打开的那个shell窗口)实现 js和 css 的合并压缩. uglifyjs 合并压缩 js: 1.安装node 这一步就不多说了,下载node ...

  6. asp.net core合并压缩资源文件(转载)

    在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www.cnb ...

  7. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  8. 简单使用grunt、bower工具合并压缩js和css

    前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些 ...

  9. grunt 合并压缩js和css文件(二)

    具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...

随机推荐

  1. [不好分类]iphone手机激活错误的处理过程

    同事一台iphone 6s手机,重启后显示无法激活.(欢迎访问viphhs,欢迎转载.https://www.cnblogs.com/viphhs) 百度后尝试更换了手机卡,重新连接wifi,都不能恢 ...

  2. 通过css选择器class给元素添加cursor的坑

    笔者在chrome中遇到了奇特的问题,在通过class给元素添加cursor的自定义图片时.出现了"Invald property value"提示,crosshair.help等 ...

  3. 九度OJ 1139:最大子矩阵 (矩阵运算、缓存)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1014 解决:376 题目描述: 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 * 1)子矩 ...

  4. xmanager 5图文使用教程

    1.Xconfig xconfig是linux下X Window环境中用于配制的一个工具,和menuconfig相似,但用法更友好方便. 当你创建一个会话,会话分配一个默认的配置文件.Xmanager ...

  5. handler message messagequeue详解

    long when 应该被处理的时间值,如果是即时发送,即为当前时间,如果是延迟发送则为当前时间+延迟时间

  6. CSS3学习笔记(5)—页面遮罩效果

    今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...

  7. 千锋很火的SpringBoot实战开发教程视频

    springboot是什么? Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  8. 【错误信息】springMVC No mapping found for HTTP request with URI

    出现这个问题的原因是在web.xml中配置错了:

  9. C语言system()函数:执行shell命令

    头文件:#include <stdlib.h> 定义函数:int system(const char * string); 函数说明:system()会调用fork()产生子进程, 由子进 ...

  10. vmware 克隆linux虚拟机后的网卡修改方法

    VMware虚拟机安装好CentOS6.5系统后,纯净的系统多克隆几份出来方便后期做试验.克隆步骤很简单,克隆后出现的问题是克隆后的网卡MAC地址和原系统MAC地址一样,在局域网内会有冲突,需要更改克 ...