Grunt 构建网站初探

一直在钻研关于 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）找到，这里也不再赘述谁都在讲的内容了。

对于工具的态度，我一直是点到即止，不求甚解，使用时先让它动起来，遇到问题，需要研究再认真钻研。