用grunt搭建自动化的web前端开发环境

 

一、安装nodejs

下载地址：https://nodejs.org/en/，因系统是win7 64位的系统，故版本选择以下图所示：

安装nodejs以后，在控制台中输入“node -v”来查看nodejs的版本，测试nodejs是否安装成功

 

二、安装grunt-CLI

用nodejs的“npm install…”在global环境安装grunt-cli ，注意在任何目录下 install -g都是同样的

打开控制台（注意：windows系统下请使用管理员权限打开），输入：

npm install -g grunt-cli

回车，命令行会出现一个转动的小横线，表示正在联网加载。加载成功以后会出现如下界面：

这时候要验证一下grunt-cli是否安装完成并生效，你只须要继续在命令行中输入“grunt”命令便可。若是生效，则会出现如下结果：

至此，你的grunt-cli已经安装成功。

 

三、建立一个简单的网站

在D盘下创建grunt文件夹，文件目录以下界面所示：

 

打开package.json文件，设置内容以下：

{
  "name": "grunt-study",
  "version": "1.0.0",
  "description": "study",
  "devDependencies": {    

  }
}

 

四、安装grunt

注意，这里安装grunt再也不是全局安装了，须要你以管理员的帐号打开控制台，在控制台进入到网站或系统的具体目录下。这里咱们进入 D:\grunt 目录下。而后输入如下命令。

npm install grunt --save-dev

回车运行命令安装成功以后以下图所示：

 安装成功以后网站根目录下会生成一个node_modules的文件夹；

 这个时候网站根目录下的package.json文件以下图所示：

 在控制台运行“grunt”命令。若是你获得一个warning提示，那说明grunt已经起做用了。以下图：

通过以上步骤，说明grunt已经在这个目录下成功安装。

 

5. 配置Gruntfile.js

module.exports = function(grunt) {

    //任务配置，全部插件的配置信息
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    //须要执行的任务（注意前后顺序）
    grunt.registerTask('default', []);
};

 

6. 演示concat 和uglify插件的使用

一、在项目根目录下利用npm安装concat和uglify插件

npm install grunt-contrib-concat --save-dev

npm install grunt-contrib-uglify --save-dev

安装成功以后以下图所示：

 

二、在Gruntfile.js中添加任务（先合并后压缩），Gruntfile.js最后的代码以下：

module.exports = function(grunt) {

    //任务配置，全部插件的配置信息
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        //合并
        concat: {
            dist: {
                src: ['assets/js/*.js'], //须要处理的文件
                dest: 'dist/js/main.js' //处理后的文件名或所在目录
            }
        },

        //压缩
        uglify: {
            dist: {
                files: {
                    'dist/js/main.min.js': ['<%= concat.dist.dest %>'] //[处理后的文件名：须要处理的文件]
                }
            }
        }
    });

    //告诉grunt咱们将使用的插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //须要执行的任务（注意前后顺序）
    grunt.registerTask('default', ['concat', 'uglify']);
};

三、运行grunt后结果以下

四、这个是dist文件夹下的内容

 

7. 完结

仅做记录，以上就是grunt的基本使用方法，把前端项目中的多个js文件，合并到一块儿，并压缩。

 

参考资料以下：

http://www.cnblogs.com/wangfupeng1988/p/4561993.html

http://jingyan.baidu.com/article/546ae185058da31149f28ce1.html

http://www.tuicool.com/articles/jUjABv

http://www.cnblogs.com/kaixinbocai/p/3672601.html

http://www.cnblogs.com/yexiaochai/p/3594561.html