zoukankan      html  css  js  c++  java
  • Grunt的使用

      在Node环境下。需要预先安装好Node。

    1、安装grunt-cli

    [root@Luxh-01 ~]# npm install -g grunt-cli

    2、创建一个目录test

    [root@Luxh-01 ~]# mkdir test

    3、进入test目录,创建一个package.json文件,内容如下:

    {
      "name": "grunt_test",
      "description": "this is a demo",
      "author": "Luxh"
    }

    4、安装grunt,只需安装到开发环境依赖中。

    [root@Luxh-01 test]# npm install grunt --save-dev

      安装完成,package.json文件如下:

    {
      "name": "grunt_test",
      "description": "this is a demo",
      "author": "Luxh",
      "devDependencies": {
        "grunt": "^0.4.5"
      }
    }

    5、这里我要是有grunt完成:clean(清除文件)、copy(复制文件)、coffee(coffee编译成js)三个功能,所有我需要安装三个grunt插件:

    [root@Luxh-01 test]# npm install grunt-contrib-clean --save-dev
    [root@Luxh-01 test]# npm install grunt-contrib-copy --save-dev
    [root@Luxh-01 test]# npm install grunt-contrib-coffee --save-dev

      安装完成后:package.json文件如下:

    {
      "name": "grunt_test",
      "description": "this is a demo",
      "author": "Luxh",
      "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-clean": "^0.6.0",
        "grunt-contrib-coffee": "^0.12.0",
        "grunt-contrib-copy": "^0.7.0"
      }
    }

    6、编写Grunt的配置文件:Gruntfile.js 内容如下:

    module.exports = function(grunt) {
    
      grunt.initConfig({
       clean:{
        main:{
          src:'dest'  //清除dest目录
        }
       },
       copy: {
         main: {
           expand: true,
           cwd: 'src/',  //指定源文件目录
           src: ['**','!**/*.coffee'],  //不复制coffee文件
           dest: 'dest/'    //复制到dest目录下
        }
       },
    
      coffee:{
        main:{
         expand:true,
         cwd:'src',
         src:['**/*.coffee'],  //src目录下的coffee文件编译到dest目录
         dest:'dest',
         ext:'.js'
        }
      }
      });
    
      grunt.loadNpmTasks('grunt-contrib-clean');
      grunt.loadNpmTasks('grunt-contrib-copy');
      grunt.loadNpmTasks('grunt-contrib-coffee');
    
      grunt.registerTask('default', ['clean:main','copy:main','coffee:main']);
    
    };

    7、在test目录下创建src目录,在里面编写coffee。

    8、执行grunt命令,将会依次执行 clean、copy、coffee,如果只需要执行clean,则允许 grunt copy

  • 相关阅读:
    jquery的动画函数animate()讲解一
    用js来实现页面的换肤功能(带cookie记忆)
    Extjs换肤+cookie皮肤记忆功能
    jquery换肤
    bootstrap的alert提示框的关闭后再显示问题
    jquery.cookie中的操作
    CSS中设置margin:0 auto; 水平居中无效的原因分析
    jQuery 遍历 json 方法大全
    jquery.min.map 404 (Not Found)出错的原因及解决办法
    AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
  • 原文地址:https://www.cnblogs.com/luxh/p/4158493.html
Copyright © 2011-2022 走看看