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

最新推荐文章于 2024-05-29 09:44:46 发布

tongtong2333

最新推荐文章于 2024-05-29 09:44:46 发布

阅读量6.6k

点赞数

分类专栏：前端文章标签： nodejs JavaScript jshint 前端构建 grunt

本文链接：https://blog.csdn.net/u014592293/article/details/50275163

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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了。如下命令