安装
1
要想使用grunt，首先必须将grunt-cli安装到全局环境中，打开控制台（注意：windows系统下请使用管理员权限打开），输入：
npm install -g grunt-cli
注意，mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令。
2
回车，命令行会出现一个转动的小横线，表示正在联网加载。加载的时间看你网速的快慢，不过这个软件比较小，一般加载时间不会很长，稍一会儿，就加载完了。你会看到以下界面。
3
要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入
“grunt”命令即可。如果生效，则会出现以下结果：
-- 可能不一样 --
END
创建一个简单的网站
1
首先，我在电脑的D盘下面建了一个“grunt_test”文件夹，里面建了三个空文件夹、两个空文档，名称如下图。（注意 Gruntfile.js 文件的首字母大写！）
devDependencies是什么意思？字面意思解释是“开发依赖项”，即我们现在这个系统，将会依赖于哪些工具来开发
2
先把package.json这个文件写一些东西
{ "name": "my", "version": "1.0.0", "devDependencies": {
}
3
接下来我们会有一系列插件的安装，他们的安装过程和grunt一样。但是他们的执行都是基于grunt的，因此才能把grunt叫做一个“构建工具”。
4
注意，这里安装grunt不再是全局安装了，需要你在控制台进入到网站或系统的具体目录下。这里我们进入 D:\grunt_test 目录下。然后输入以下命令。
5
应该第一时间打开package.json去看看，那里的“devDependencies”有什么变化。我这里的变化如下图，看看你的是不是和我的一样
然后你再看看文档目录中的文件或者文件夹有什么变化？我这里多了一个“node_moles”文件夹，其中有一个“grunt”文件夹，再其中有若干文档。这里就是存储grunt源文件的地方。
6
在控制台运行“grunt”命令。如果你得到一个warning提示，那说明grunt已经起作用了。
END
配置Gruntfile.js
1
Gruntfile.js 这个文件，肯定是为了grunt做某种配置的。按照grunt的规定，我们首先把Gruntfile.js配置成如下格式
END
Grunt插件
Contrib-jshint——javascript语法错误检查；
Contrib-uglify——压缩javascript代码
Contrib-cssmin——压缩css代码
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
使用uglify插件（压缩javascript代码）。
安装uglify插件的方式，和安装grunt是一样的。还记得grunt是怎么安装的吗？
我们在现有的“src”文件夹中新建一个“test.js”，并随便写一些代码。显然，我们无法通过双手和键盘写出压缩后的代码。
第一步，在grunt.initConfig方法中配置 uglify 的配置参数
uglify:
{ target: { files: [{ expand: true,
cwd: 'src', src: ['*.js', '!*.min.js'], ext:
'.min.js' }] }}
)};
grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.registerTask('default',
['uglify', 'cssmin']);//使用grunt命令执行
以上说的这三步已经OK了，接下来我们去试试。在控制台中运行grunt命令，
控制台将输入如下信息：
现在好像没有 -- without errors --
⑵ grunt怎样压缩requirejs中各模块js
安装 grunt-contrib-requirejs
npm i --save-dev grunt-contrib-requirejs
配置 Grantfile
首先我们来看下项目目录
src 是每个页面的依赖文件
moles 和 lib 是一些模块和库
dist 是合并压缩后的文件
在 Gruntfile 中首先得到需要处理的文件列表，并创建一个空对象，用来装requirejs的配置
var files = grunt.file.expand('static/js/src/*.js');
var requireOptions = {};
然后遍历这个文件列表数组，得到js文件的名称：
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
}
接下来为每个js文件配置一个任务，任务名称就是js的文件名称：
files.forEach(function (file) {
requireOptions[filename] = {
options: {
baseUrl: 'static/js',
paths: {
jquery: 'lib/jquery.min',
lrz: 'lib/lrz.all.bundle',
zepto: 'lib/zepto.min',
ajax: 'moles/ajax',
validators: 'moles/validators',
page: 'moles/mixins/to_page',
dialog: 'moles/mixins/toggle_login_dialog',
},
optimizeAllPluginResources: true,
name: 'src/' + filename,
out: 'static/js/dist/' + filename + '.js'
}
};
}
接着初始化 grunt 配置并加载并注册任务
grunt.initConfig({
requirejs: requireOptions
})
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('require', ['requirejs']);
到这里 requirejs 的配置部分就结束了，在命令行输入 grunt require 就会看到 static/js/dist 目录下面有东西蹦出来了，而且全部都是合并后并压缩好的。
在html页面中只需要：
<script src="static/js/require.js"></script>
<script src="static/js/dist/index.js"></script>
就能成功加载了。
增加js文件的版本号
浏览器有时会对加载过的js或css进行缓存，如果你的某些js依赖发生改变，那么就可能发生错误，解决办法是在文件后面增加查询字符串，例如 a.js?v=dsd712sd
那么如何控制版本，首先我们肯定想到用 new Date() ，但是如果每次发布都让浏览器重新加载（尽管有些文件根本就没有改变），难免会造成浪费。正确的方案是根据文件内容生成MD5值来作为版本号，这样当文件没有改变时，hash就不会变。
那么如何自动解决版本号的问题，我们可以用到 asset-cache-control 这个grunt插件
首先安装：
npm i --save-dev asset-cache-control
asset-cache-control 的用法个很简单，只要设置一个源文件，再设置html文件的路径就可以了
grunt.initConfig({
cache: {
demo: {
assetUrl: 'js/demo.js',
tmp: ['demo.html']
}
}
})
注意的是：html文件中需要引入 js/demo.js
<script src='js/demo.js'></script>
然后加载和注册 asset-cache-control 插件
grunt.loadNpmTasks('asset-cache-control');
grunt.registerTask('cache', ['cache']);
接着在命令行敲 grunt cache 就会发现 index.html 中的 script 标签加上了查询字符串。
<script src='js/demo.js?t=92e26c5d'></script>
对每个js文件配置 cache 的任务：
var files = grunt.file.expand('static/js/src/*.js');
var cacheOptions ={};
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
cacheOptions[filename] = {
assetUrl: 'static/js/dist/' + filename +'.js',
files: {
'tmp': [filename+'.php']
}
}
});
检测每个文件的变化，自动执行任务
用到 grunt-contrib-watch 这个官方组件
在 grunt.initConfig 中配置：
watch: {
files: ['static/js/src/*.js','static/js/moles/*.js'],
tasks: ['requirejs', 'cache'],
options: {
spawn: false
}
}
这样，当你修改 static/js/src/ 和 static/js/moles/ 下的所有js文件时，就会执行 requirejs 和 cache 任务。
完整配置清单
mole.exports = function (grunt) {
var files = grunt.file.expand('static/js/src/*.js');
var requireOptions = {};
var cacheOptions ={};
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
requireOptions[filename] = {
options: {
baseUrl: 'static/js',
paths: {
jquery: 'lib/jquery.min',
lrz: 'lib/lrz.all.bundle',
zepto: 'lib/zepto.min',
ajax: 'moles/ajax',
validators: 'moles/validators',
page: 'moles/mixins/to_page',
dialog: 'moles/mixins/toggle_login_dialog',
},
optimizeAllPluginResources: true,
name: 'src/' + filename,
out: 'static/js/dist/' + filename + '.js'
}
};
cacheOptions[filename] = {
assetUrl: 'static/js/dist/' + filename +'.js',
files: {
'tmp': [filename+'.php']
}
}
});
grunt.initConfig({
requirejs: requireOptions,
cache: cacheOptions,
watch: {
files: ['static/js/src/*.js','static/js/moles/*.js'],
tasks: ['requirejs', 'cache'],
options: {
spawn: false
}
}
});
grunt.loadNpmTasks('asset-cache-control');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('require', ['requirejs','cache'])
};
另外，浏览器加载一个大文件比加载n个小文件的效率要高很多，所以模块的合并对性能也有很大的提高。
⑶ 怎么让html代码变成一个转行
首先我个人并不赞成 html 代码的压缩，因为这没有多大意义，反而影响自己的开发。理由：
想压缩 html 去掉格式让其他人难以查看？没意义，现在有太多的工具可以格式化代码。
想通过压缩来缩小 html 文件体积？没多大意义，除非你的网站日均 PV 上百万，且 html 文件体积较大，这时候压缩 html 能节省一些流量。
想通过压缩来提高 html 加载速度？没多大意义，服务端开启 gzip，一劳永逸。
如果你实在纠结要压缩的话，不拦你，可以用grunt、gulp、fis 这类前端工具。
⑷ 如何利用Grunt单独压缩各个JS和CSS文件，并生成对应的Source Map
1. Package.Json
{
"name": "xxx",
"version": "0.0.1",
"author": "xxx",
"devDependencies": {
"grunt": "~0.4.4",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-uglify": "~0.5.1",
"grunt-contrib-cssmin": "~0.10.0"
}
}
2. Gruntfile.Js
mole.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成json数据
pkg: grunt.file.readJSON('package.json'),
// 压缩所有js并生成source map
uglify: {
my_target: {
options: {
sourceMap: true
},
files: [
// 可以直接作用于文件夹下所有文件
{
expand: true,
cwd: 'app/js',
// 排除.min的文件
src: ['*.js', '!*.min.js'],
// 输出和输入在同一目录
dest: 'app/js',
ext: '.min.js'
},
// 也可以指明具体一一对应的文件
{
// core
'core/jsCompare.min.js': 'core/jsCompare.js',
'core/jsHelper.min.js': 'core/jsHelper.js',
'core/jsShare.min.js': 'core/jsShare.js',
// dijia
'app/dijia/dijia.min.js': 'app/dijia/dijia.js',
'app/dijia/location.min.js': 'app/dijia/location.js'
}
]
}
},
// 压缩所有css
cssmin: {
minify: {
expand: true,
cwd: 'resources/css/',
src: ['**/*.css', '**/!*.min.css'],
dest: 'resources/css/',
ext: '.min.css'
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);
};
⑸ grunt 压缩 合并 css 后 需要删除注释 与 合并同名 选择器 怎么配置 gruntfile.js
Grunt基于Node.js，其中 npm 是 Node.js 的包管理器，而Grunt和Grunt插件就通过 npm 安装并管理。
Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。
安装Node.js：
去Node.js官网，点击INSTALL下载并安装，现在的Node.js会自动安装npm。
安装完成之后，打开命令行，进行后续的操作（开始->输入CMD 或 开始->所有程序 ->命令提示符）。
进入Node.js的安装目录（默认路径为"C:\Program Files\nodejs"）：
cd \pro*\nod*
⑹ 如何利用grunt实现增量编译
传统做法
创建文件夹,命名为新项目balbala
新建一个index.html，从过去的一个文件中把用得到的html代码拷贝进来，再新建css、js、images文件夹
新建style.css,base.js等需要的样式表文件和js以及一堆乱七八糟的文件。
切图、写html，写css、写js
不断F5刷新、F5刷新：浏览器里测试
差不多完成了，开一个压缩工具（线下的或者在线的），压缩下js和css文件，新建一个min.style.css和min.v.js，修改html中的文件路径，填充，搞掂。
右键，单击，压缩成一个.zip文件，再重新命名下为新项目balblaa.zip之类，发给测试工作人员，或者直接把整个文件夹通过QQ传给测试，要不就自己动手直接ftp上传。
测试时、上线后遇到bug了，PM呼叫了；有细节要修正了，PM又呼叫了。咳，线下debug，保存一个新的新项目balbla-修改.zip >> 测试上线 or ftp上传，又重复4、5、6、7步。
再测试、再debug、再打包新项目balbla-修改新.zip、再发送上传......心中默默地说“PM你好”。
⑺ gulp或者grunt中有哪些神一般的task
front-end-separate(前后端分离脚手架)
front-end-separate
一个前后端分离的脚手架工具（自主研发）
为什么选择grunt而不是gulp
如果你也和我一样喜欢grunt这种配置的方式，那么我相信这个脚手架觉对十分适合你
所有静态资源都md5全并压缩打包,css,js,img,html
已在生产环境验证
基于express和grunt的前后端分离框架
模板引擎使用的是nunjucks，好处是可以实现模版继承，又不像jade一样把html标签都简化了
express提供路由服务
项目中app为原代码文件（开发用），dist为打包后的文件（用于线上）
开发使用app，线上使用dist，支持一键cdn部署，加速你的项目
项目启动时，修改任何express代码，可以实现自动重启–基于nodemon
支持sass图片精灵（自动打包精灵图片，再也不用手动去拼凑了）
基于grunt md5 打包合并
线上输出的html已经压缩成一行（让你的代码更有Geeker范）
###怎么使用:
clone 代码
启动命令行:
如果没有安装grunt，请先全局安装grunt bash $ npm i grunt-cli -g 安装npm包(可能需要一段时间，请耐心等待)
希望对你有帮助
⑻ grunt 合并文件之后，在html中的引用目录怎么修改
真实开发的web项目是不是都应该将node_moles通过npm方式安装在项目webapp目录结构下？
2、我可能会遇 到项目前期开发为了js和css的调试没有进行压缩文件，页面(jsp/html)的引用还是 css/index.css js/index.js,并不是压缩之后的dist/css/index.min.css dist/js/index.min.js文件，后期进行压缩，需要引用 dist/*/*.min.* 文件,这个时候将怎么做，让所有经过压缩的文件(js css)的页面引用路径改变,引用压缩之后的文件(这个肯定不会手动改吧，累死人啊！！)。其次，如果压缩就替换以前的文件，为了后期的压缩文件还原，可 能会生成*.map.css 等文件，这个将怎么处理(不会让它发布吧？)
3、关于文件合并，想知道js或者css文件进行合并不会不会出现问题，比如js中定义相同的方法或者变量什么的东西，css中有相同的class进行样式控制，这个时候合并我感觉会出现问题，不知道是否？合并文件需要注意哪些，有哪些原则讲究？
4、公司不能连接外网，但是做项目也要让
⑼ 请问，maven有什么插件可以在打包时，自动压缩css、js、jsp、html文件并且能够自动合并js和css
前端页面开发，资源文件（如js，html，js）的合并压缩，用Grunt来处理，包括png这些文件也可以压缩，挺好用的