grunt（1）——安装与配置

69 阅读 0 评论 46 点赞

我是靠谱客的博主娇气裙子，最近开发中收集的这篇文章主要介绍grunt（1）——安装与配置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. 安装python 2.7.X
grunt需要使用到nodejs，而nodejs依赖python，下载nodejs对应版本的python
验证安装成功：cmd-->python --version

2. 安装nodejs
预备使用nodejs的npm下载和管理grunt模块
验证安装成功：cmd-->npm --version

3. 安装grunt-cli
安装使用grunt模块的环境
cmd-->npm install -g grunt-cli

验证安装成功：cmd-->grunt --version

（npm默认安装模块路径：C:UsersAdministratorAppDataRoamingnpm）

4. 在你的项目根目录下
新建package.json、Gruntfile.js文件
示例：
======================================================
package.json：
{
   "name":"abc",
   "version":"0.1.0",
   "author":"xwl",
   "private":true,
   "devDependencies":{
       "grunt":"~0.4.0",
       "grunt-contrib-cssmin":"*",
        "grunt-contrib-sass":"*",
        "grunt-contrib-uglify":"*",
        "grunt-contrib-watch":"*",
        "grunt-cssc":"*",
        "grunt-htmlhint":"*",
        "matchdep":"*"
   }
}
======================================================
Gruntfile.js：
module.exports = function(grunt){

   // Load grunt-*
   require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),

        uglify: {
            build: {
                files: {
                    'build/style/hello.min.js': ['style/hello.js']
                }
            }
        },

        watch: {
           js: {
                files: ['style/hello.js'],
                tasks: ['uglify']
            }
       }

    });

    // Load the plugin that provides the "uglify" task.
    //grunt.loadNpmTasks('grunt-contrib-uglify');

    // Default task(s).
    grunt.registerTask('default',[]);
    //grunt.registerTask('default',['uglify']);

    //grunt.registerTask('buildjs',['uglify']);

};
======================================================

5. 在项目根目录下执行cmd
cmd-->npm install
若提示：npm ERR! Error：shasum check failed for ....，可能是网速问题，可以尝试重新执行

验证安装成功：项目根目录下，npm会自动新增文件夹node_modules，并且在里面下载好了package.json中配置的所有模块