一直在钻研关于 Umbraco 的东西, 打算换换脑子,玩点别的东西先。
Grunt 是之前两个项目中,尝试开始使用的东西,因为不是专职的前端攻城狮,所以对于这类东西还是知之甚少,不过经过这两次的使用,真心觉得这种东西非常的便利,选择了对的工具,很多工作都可是事半功倍的。
具体 Grunt 是什么,请自行前往官网了解。中文版网站,近期不知为何不能访问了,www.gruntjs.net,看起来不是被墙的原因,似乎是服务除了什么故障。
How to started,根据官网的指南一步步做下来即可。之前一直在用 mac,给同事 Windows 安装时确实也遇到了一点问题,在此仅给出 Windows平台安装的的一点建议。
1、不必使用类似于 n 或者 nvm 一类的 node 版本管理工具进行安装,这在某些集团企业中,设置权限是非常麻烦的事情;
2、直接下载 nodejs 官网的 for windows 安装包下载 node,安装好之后,运行:
npm install -g grunt grunt-cli grunt-init
*以上分别是安装 grunt、grunt 命令行工具,init 是一个 grunt 插件,可以初始化基本的 grunt 文件结构。
3、安装好后,一定记得设置 windows 环境变量,将 Grunt 安装的目录,配置到系统 PATH 路径中去,否则当你关闭 dos 窗口再开启,则会提示找不到 Grunt 命令,而你再次安装又会提示报错。
Grunt 结构中,有两个最为重要的结构性描述文件:package.json、Gruntfile.js,前者实际也是 node 项目的标配,后者是 Grunt 独有的构建文件。
package.json 文件:
{
"name": "grunt_templete",
"version": "1.0.0",
"description": "基础的Grunt项目模板",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^2.2.0",
"grunt-contrib-htmlmin": "^2.3.0",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-less": "^1.4.1",
"grunt-contrib-uglify": "^3.0.1",
"grunt-contrib-watch": "^1.0.0"
}
}
*其中,关于依赖包的版本号,是需要权衡考虑的,如果项目时间较长,可能会不定期的更新 package.json,导致团队间共享要小心该文件的管理,还是改为固定版本较好;如果是短期项目,则可是使用"^"来自动更新至最新版本。
Gruntfile.js 文件:
module.exports = function(grunt) {
grunt.file.defaultEncoding = 'utf-8';
/**project configuration*/
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
clean: {
contents: ['dest/*'],
subfolders: ['dest/*/'],
css: ['dest/assets/css/*'],
js: ['dest/assets/js/*'],
cleantemp:['dest/assets/css/temp']
},
less: {
default: {
files: [{
expand: true,
cwd: 'src/less',
src: ['*.less'],
dest: 'dest/assets/css/temp',
ext: '.css'
}]
}
},
cssmin: {
default:{
files: [{
expand: true,
cwd: 'dest/assets/css/temp',
src: ['*.css'],
dest: 'dest/assets/css/',
ext: '.min.css'
}]
}
},
jshint:{
options:{
expr:true,
lastsemic : true,
scripturl:true,
ignores : ['dealer-*.js']
},
beforeuglify:['Gruntfile.js', 'src/js/*.js'],
afteruglify:['dest/assets/js/*.js', '!dest/assets/js/dealer.min.js']
},
uglify:{
buildall: {
files: [{
expand:true,
cwd: 'src/js',
src:'*.js',//所有js文件
dest: 'dest/assets/js',//输出到此目录下
ext: '.min.js'
}]
},
},
copy: {
main: {
expand: true,
nonull: true,
cwd: 'src/html',
src: '**',
dest: 'dest/',
options: {
}
},
resources: {
expand: true,
nonull: true,
cwd: 'src/images',
src: '**',
dest: 'dest/assets/images',
}
},
watch: {
css: {
files: ['src/less/*.less'],
tasks: ['less', 'cssmin', 'clean:cleantemp'],
options: {
interrupt: true,
spawn: false
}
},
js: {
files: ['src/js/*.js'],
tasks: ['jshint:beforeuglify', 'uglify', 'jshint:afteruglify'],
options: {
interrupt: true,
spawn: false
}
},
resources: {
files: ['src/html/*', 'src/html/**/*', 'src/images/*', 'src/images/**/*'],
tasks: ['copy'],
options: {
interrupt: true,
spawn: false,
event: ['all'],
}
}
}
});
/**load tasks package*/
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');/**语法检查**/
grunt.loadNpmTasks('grunt-contrib-uglify');/**js 压缩**/
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['clean', 'less', 'cssmin', 'jshint:beforeuglify', 'uglify', 'jshint:afteruglify', 'clean:cleantemp', 'copy', 'watch']);
};
*这是我目前比较常用的基本包,包含了文件清理、less 编译、css 压缩、 js语法检查(分压缩前和压缩后)、压缩、html 以及其他资源文件的复制、文件变动的检测。每次运行 Grunt 命令之后,即可专注于前端的工作,不必再去考虑 js 语法、css 格式等问题,复制文件路径等。如果语法错误,命令行中会有醒目的提示;如果无误,修改后即可在浏览器中直接查看。
so easy!!!
所有的组件及使用方法,均可在官方插件库(https://gruntjs.com/plugins)找到,这里也不再赘述谁都在讲的内容了。
对于工具的态度,我一直是点到即止,不求甚解,使用时先让它动起来,遇到问题,需要研究再认真钻研。