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:\Users\Administrator\AppData\Roaming\npm


4. 在你的项目根目录下
新建package.jsonGruntfile.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中配置的所有模块



6. 开始使用grunt
前提:package.json中书写没有问题且加载的模块下载成功;Gruntfile.js中任务书写没有问题;

在项目根目录下运行:cmd-->grunt

或者本例中配置的watch任务(cmd-->grunt watch,watch监视一个文件的状态并自动执行grunt的模块)


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值