grunt是前端自动化构建工具,可以混淆js代码,当然也能压缩css样式。而grunt必须依赖于node.js,对于node.js,早有耳闻,但一直没去认知了解。
基于先学习好grunt的目的,那么首先,我们要安装node.js.
去官网nodejs下载地址; 下载适合自身电脑系统的版本。这里我使用的是node-4.2.4.msi的版本。现在的版本中已经集合了npm;npm是nodejs的包管理工具,我这里粗浅的理解为java中maven管理架包一样的一种构建工具。
这里安装好之后,nodejs自带一个命令行管理工具Node.js command prompt;可以在此工具中或者cmd命令行一次输入node -v ;npm -v 查看安装的版本。
接下来我们可以使用npm 命令来安装grunt了,grunt可以在单个项目中安装,也可以安装在全局系统中,推荐在项目中安装,这样方便grunt即时更新版。
在安装grunt前,必须使用:
npm install -g grunt-cli
-g代表全局;
注意,安装grunt-cli
并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile
在同一目录中 Grunt。
接下来我们需要使用两个关键的文件package.json和Gruntfile.js.
在我们的想要用grunt实现系列功能的项目根目录下,新建package.json和Gruntfile.js
在package.json文件中:
{
"name": "first-grutn",
"version": "1.0.0",
"description": "test",
"main": "test.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"test"
],
"author": "tt",
"license": "ISC",
"devDependencies": {
"grunt-contrib-jshint": "^0.11.3",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-cssmin": "*"
}
}
关于项目的名称,版本,描述等,重要的是devDependencies中列出了所需要依赖的grunt插件列表。这里使用了jshint,watch,和cssmin3个插件。
Gruntfile.js是刚才package.json的所列grunt插件的配置。
module.exports = function(grunt) {
// 配置任务参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine: {
files: {
'css/release/compress.css': ['css/*.css'] // 指定合并的CSS文件 ['css/base.css', 'css/global.css']
}
},
minify: {
options: {
// keepSpecialComments: 0, /* 删除所有注释 */
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
files: {
src: ['css/master.css'],
dest:'css/release/master.mins.css',
}
}
},
uglify:{
options:{
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
files:{
src:"js/newtest.js",
dest:"dest-js/dest.js"
}
}
});
// 插件加载(加载 "cssmin" 模块)
grunt.loadNpmTasks('grunt-contrib-cssmin');
//加载压缩js文件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 自定义任务:通过定义 default 任务,可以让Grunt默认执行一个或多个任务。
grunt.registerTask('default', ['cssmin']);
//压缩js文件
// grunt.registerTask('default', ['uglify']);
};
此文件再grunt命令执行的时候,会加载所列grunt插件。如代码所示,我们压缩js文件夹下newtest.js到映射文件dest文件夹下,并更名为dest-js.js文件。
当配置好这两个文件就可以在命令行执行grunt来压缩js了。如下命令
npm install
grunt
此时再回到我们文件目录中,如约出现了dest/dest-js.js文件并且文件已经压缩好了。
压缩前文件,
压缩后文件,并且自动加上了注释;
今天第一次研究grunt,理解比较粗浅。赞时实现的功能就是能用他来压缩js,css,和js的测试。后边再慢慢学习使用grunt来构建前端项目。
参考链接:grunt快速入门