关键词:
Grunt的配置及使用(压缩合并js/css)
安装
前提是你已经安装了nodejs和npm。
你能够在 nodejs.org 下载安装包安装。也能够通过包管理器(比方在 Mac 上用 homebrew,同一时候推荐在 Mac 上用 homebrew)。
安装grunt CLI
npm install -g grunt-cli
依照官方的说法。grunt-cli仅仅是为了在同一台机器上安装不同的grunt版本号,那么咱们先不去管他。
在项目中使用grunt
首先须要往项目里加入两个文件:package.json和Gruntfile.js
· package.json:该文件用来为npm存放项目配置的元数据,与grunt关系最大的配置在devDependencies中。
· [javascript] view plaincopyprint?
1. {
2. "name": "cyjs",
3. "version": "0.1.0",
4. "description": "js for k68.org",
5. "homepage": "http://www.k68.org/",
6. "author": "firebaby",
7. "devDependencies": {
8. "grunt": "~0.4.1",
9. "grunt-contrib-jshint": "~0.3.0",
10. "grunt-contrib-concat": "~0.1.1",
11. "grunt-contrib-uglify": "~0.1.2",
12. "grunt-contrib-cssmin": "~0.5.0",
13. "grunt-htmlhint": "~0.9.2"
14. }
15. }
· {
· "name": "cyjs",
· "version": "0.1.0",
· "description": "js for k68.org",
· "homepage": "http://www.k68.org/",
· "author": "firebaby",
· "devDependencies": {
· "grunt": "~0.4.1",
· "grunt-contrib-jshint": "~0.3.0",
· "grunt-contrib-concat": "~0.1.1",
· "grunt-contrib-uglify": "~0.1.2",
· "grunt-contrib-cssmin": "~0.5.0",
· "grunt-htmlhint": "~0.9.2"
· }
}
· Gruntfile.js:注意G的大写,这个文件就是grunt的配置了,当中具体定义了每一个任务的细节和运行任务的顺序等。
一、安装grunt
方式一、调用配置文件一起安装
npm install
方式二、逐步安装
在命令行进入项目所在文件夹,键入例如以下命令就可以,npm会依据devDependencies中的配置,将须要的grunt及其插件下载到你的项目文件夹中。
npm install grunt --save-dev
grunt-contrib-jshint(js语法检查)、grunt-contrib-concat(js合并)、grunt-contrib-uglify(採用UglifyJS压缩js)、grunt-contrib-cssmin(Css压缩合并)、grunt-htmlhint(html语法验查),以上都是经常使用的插件。
很多其它插件,请訪问:http://gruntjs.com/plugins
在项目文件夹下安装插件也可採用例如以下方式安装:
安装:uglify
[txt] view plaincopyprint? 1. npm install grunt-contrib-uglify npm install grunt-contrib-uglify |
安装:cssmin
[txt] view plaincopyprint? 1. npm install grunt-contrib-cssmin npm install grunt-contrib-cssmin |
插件安装完毕后,查看根文件夹,会发现node_modules文件夹,包括了对应的插件文件夹。
二、新建Gruntfile.js
Gruntfile.js由下面内容组成
1、wrapper函数。结构例如以下,这是Node.js的典型写法,使用exports公开API
[javascript] view plaincopyprint?
1. module.exports = function(grunt) {
2. // Do grunt-related things in here
3. };
module.exports = function(grunt) {
// Do grunt-related things in here
};
2、项目和任务配置
3、加载grunt插件和任务
4、定制运行任务
例:
[javascript] view plaincopyprint?
1. module.exports = function(grunt) {
2. //配置參数
3. grunt.initConfig({
4. pkg: grunt.file.readJSON(‘package.json‘),
5. concat: {
6. options: {
7. separator: ‘;‘,
8. stripBanners: true
9. },
10. dist: {
11. src: [
12. "js/config.js",
13. "js/smeite.js",
14. "js/index.js"
15. ],
16. dest: "assets/js/default.js"
17. }
18. },
19. uglify: {
20. options: {
21. },
22. dist: {
23. files: {
24. ‘assets/js/default.min.js‘: ‘assets/js/default.js‘
25. }
26. }
27. },
28. cssmin: {
29. options: {
30. keepSpecialComments: 0
31. },
32. compress: {
33. files: {
34. ‘assets/css/default.css‘: [
35. "css/global.css",
36. "css/pops.css",
37. "css/index.css"
38. ]
39. }
40. }
41. }
42. });
43.
44. //加载concat和uglify插件。分别对于合并和压缩
45. grunt.loadNpmTasks(‘grunt-contrib-concat‘);
46. grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
47. grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
48.
49. //注冊任务
50. grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘, ‘cssmin‘]);
51. }
module.exports = function(grunt) {
//配置參数
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
concat: {
options: {
separator: ‘;‘,
stripBanners: true
},
dist: {
src: [
"js/config.js",
"js/smeite.js",
"js/index.js"
],
dest: "assets/js/default.js"
}
},
uglify: {
options: {
},
dist: {
files: {
‘assets/js/default.min.js‘: ‘assets/js/default.js‘
}
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
‘assets/css/default.css‘: [
"css/global.css",
"css/pops.css",
"css/index.css"
]
}
}
}
});
//加载concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
//注冊任务
grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘, ‘cssmin‘]);
}
grunt api文档:http://gruntjs.com/api/grunt
三、命令行运行grunt任务
进入到项目根文件夹,敲:
[txt] view plaincopyprint? 1. grunt grunt |
就会按Gruntfile配置的文件进行压缩合并。
也能够单独运行,例运行js压缩命令:
[txt] view plaincopyprint? 1. grunt uglify grunt uglify |
css压缩命令
[txt] view plaincopyprint? 1. grunt cssmin |
DEMO下载:点击打开链接
grunt常用插件的使用
Grunt 作为前端自动化构建工具,我主要使用到的是其中对css的less预处理器的转换,图片的压缩,js,css文件的合并压缩以及实时监测的插件。好处是:节省带宽流量,提高了代码的安全性。 使用Grunt的步骤如下:1.安装:... 查看详情
grunt的用法
以下是压缩js,css和css合并,html,img,js语法检查 要想实现这些,需要在命令行里下载: js: npminstall grunt-contrib-uglify--save-dev css: npminstall grunt-contrib-cssmin --save-dev npminstall& 查看详情
grunt两小时入门
...ackage.json5.3在项目中安装grunt和相关插件5.4Gruntfile语法5.4.1配置任务5.4.2加载插件5.4.3注册任务5.5为我们的项目配置gruntfile.js5.6执行任务6.后续学习 1.用途和场景jshint代码检查代码合并代码压缩--js/css/ht 查看详情
使用 Grunt 压缩 HTML 中的类名和 id
】使用Grunt压缩HTML中的类名和id【英文标题】:CompressingclassnamesandidsinHTMLwithGrunt【发布时间】:2015-03-0719:15:27【问题描述】:<divclass="aAAJ-KU-JgJ-KU-Jg-K9"></div>Gmail使用的这种压缩方法的名称是什么,是否有用于它的grunt模块... 查看详情
关于requirejs和grunt压缩合并是否矛盾
...。但是分成多个js文件增加了请求数,那么就要用到合并压缩。合并压缩了原来的许多独立的js模块,那requirejs又是怎么冲压缩的文件中找到各个独立的模块进行加载的呢,感觉两者有点冲突,这个问题想了很久也假想了很多可... 查看详情
折腾一两天,终于学会使用grunt压缩合并混淆js脚本,小激动,特意记录一下+spm一点意外收获
很长时间没有更新博客了,实在是太忙啦...0.0,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解决问题不糊弄人... 查看详情
grunt
... ③简单语法检查1、grunt.initConfig方法 用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。 每个目标的具体设置,需要参考该模板的文档。 就cssmin来讲,minify目标的... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件,初学,有误请包涵准备阶段1、nodeJs环境因... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件,初学,有误请包涵准备阶段1、nodeJs环境因... 查看详情
转载grunt整合版30分钟学会使用grunt打包前端代码
【grunt整合版】30分钟学会使用grunt打包前端代码grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并... 查看详情
glup快速入门整理(代码片段)
...应用gulp_test|-dist|-src|-js|-css|-less|-index.html|-gulpfile.js-----gulp配置文件|-package.json"name":"gulp_test","version":"1.0.0"安装gulp:全局安装gulpnpminstallgulp-g局部安装gulpnpminstallgulp--save-dev配置编码:gulpfile.js//引入gulp模块vargulp=require(‘gulp‘);//定义... 查看详情
grunt管理js/css
1.安装node2.npm安装3.运行grunt,可能遇到下面的问题可以运行npminstall-ggrunt然后再运行grunt可以看到已经压缩成功了: 查看详情
grunt简单教程
...js文件,压缩js文件,验证js。编译less,合并css。还能够配置自己主动任务。单元測试等等,grunt有许多的插件,能够满足你的大部分需求。2.怎么安装先介绍一些东西:npm是node.js的包管理器通过npm能够下载安装nodejs的模块包cnpm... 查看详情
grunt入门
...项目的得力助手。接下来就随lizimeme一起学习grunt的基本使用 我的电脑安装了nodejs,自动全局安装了npm(npm是随同NodeJS一起安装的包管理工具)第一步:windows系统下:npminstall-ggrunt-cli//全 查看详情
gulp入门及简单使用
...nt、Webpack(何其复杂!)。所以我们先来个简单的。 使用首先,使 查看详情
grunt-js文件压缩
...个数组,表示该任务需要一次使用的模块。 用于模块配置,它接受一个对象作为参数。该对象的 查看详情
grunt怎样压缩requirejs中各模块js
安装grunt-contrib-requirejsnpmi--save-devgrunt-contrib-requirejs配置Grantfile首先我们来看下项目目录src是每个页面的依赖文件modules和lib是一些模块和库dist是合并压缩后的文件在Gruntfile中首先得到需要处理的文件列表,并创建一个空对象,用... 查看详情
关于grunt和gulp
...的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。”Grunt基于N 查看详情