NPM、nodeJS安装，grunt自动化构建工具学习总结

一：安装

npm是随nodeJs安装包一起安装的包管理工具，能解决NodeJS代码部署上的很多问题；

常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

nodejs的官网地址：https://nodejs.org/en/

nodejs中文网地址：http://nodejs.cn/

1.从node.js官网下载最新安装包进行安装

2.windows系统下，windows+R调出命令，输入cmd，打开命令工具，检测npm是否安装：输入命令：npm -v

 

3.完成npm安装后，进行安装grunt

输入命令：npm install -g grunt-cli，按下回车键，npm将会从线上自动为我们寻找安装所需要的包

npm install -g grunt-cli命令安装后,全局环境下都可使用

npm install grunt-cli命令，可新建目录，为此目录下安装npm

npm install会报找不到package.json文件，如果后面没有跟任何的提示安装信息，将会找该目录下的package.json，按照里面的dependencies项进行安装，依赖于npm的哪些包和组建

至此，grunt环境安装完成，就可以开始创建项目实践grunt了

 

二、实践

1.创建一个项目grunt

2.使用命令：npm init，初始化grunt项目为grunt项目生成package.json

执行完命令后，会在项目根目录下生成package.json文件，文件内容如下图2

3.输入命令：npm install grunt --save-dev，将grunt的最新版本安装到项目的根目录中，并将其添加到package.json的devDependencies内

4.使用命令：npm install <module> --save-dev 安装相应的插件，<module>则是插件的名字，命令执行完后，会在package.json的devDependencies内加入相应插件的版本号

目前我只测试了合并和压缩两个插件：

合并任意文件：grunt-contrib-concat，输入命令：npm install grunt-contrib-concat --save-dev

合并压缩js代码：grunt-contrib-uglify，输入命令：npm install grunt-contrib-uglify --save-dev

可以看到在命令运行结束后，package.json文件的devDependencies内多了这两项

5.在项目的根目录下与package.json同级新建Gruntfile.js文件

此文件由“wrapper”函数、项目与任务配置、加载grunt任务和插件、自定义任务

module.exports = function (grunt) {/*************“wrapper”函数*************/
    grunt.initConfig({/**************项目和任务配置**********/
        pkg: grunt.file.readJSON('package.json'),//引入package.json文件，并可通过pkg.调用package.json中定义的配置
        //合并文件
        concat: {
            options: {
                //定义一个用于插入合并输出文件之间的字符
                separator: ';'
            },
            dist: {
                // 将要被合并的文件
                src: ['src/js/*.js'],
                // 合并后的JS文件的存放位置
                dest:'min/js/<%= pkg.name %>.js'
            }
        },
        //压缩文件
        uglify: {
            options: {
                //压缩后的文件生成的注释
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            dist: {
                files: {
                    //将concat合并后的文件进行压缩
                    'min/js/<%= pkg.name %>.min.js' : ['<%= concat.dist.dest %>']
                }
            }
        }
    })
    /*****************加载grunt插件和任务******************/
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    /******************自定义任务*******************************/
    grunt.registerTask('default',['concat','uglify'])
}

6.在命令行中执行grunt命令，将会进行执行，grunt命令只会执行任务default的任务，其他任务执行需要加上任务名，比如grunt test

先看看执行命令前各文件的状态

在min下面并没有任何文件夹和文件，a.js和b.js中的内容如下图：

执行命令后：

输入命令：grunt

再看看项目的变化：

在min文件夹下生成了一个js文件夹，并在里面生成了grunt_project.js和grunt_project.min.js，grunt_project.js为a.js和b.js合并后的内容结果，grunt_project.min.js为合并后的结果压缩后的内容结果

到这里，简单的grunt构建工具已经完成了，是一个非常大的收获，它还有很多很多的属性，将要学习，加油！！！