node.js的安装以及grunt的使用

                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快速入门