zoukankan      html  css  js  c++  java
  • 如何设置Grunt

    原文地址:

    Step 1: Install Node.js

    Download a Node installer and run it. Installation packages are available for Mac, Windows, Linux, and SunOS. Alternatively, you can compile and install it from source.

    Step 2: Install Grunt

    Install Grunt using the Node package manager: (安装在Global

    $ npm install -g grunt
    $ npm install -g grunt-cli

    Providing -g installs the package globally.

    Providing -g installs the package globally.

    Step 3: Create a Gruntfile.js 

    Now create a file called Gruntfile.js in your project directory.

    Then copy and paste in the example configuration shown just below this paragraph. You'll just need to change the (commented) lines that define which files Grunt should keep an eye on, as well as the source and destination paths to the LESS and CSS files.

    Example:

    module.exports = function(grunt) {
      grunt.initConfig({
        less: {
          development: {
            options: {
              compress: true,
              yuicompress: true,
              optimization: 2
            },
            files: {
              // target.css file: source.less file
              "css/main.css": "less/main.less"
            }
          }
        },
        watch: {
          styles: {
            files: ['less/**/*.less'], // which files to watch
            tasks: ['less'],
            options: {
              nospawn: true
            }
          }
        }
      });
    
      grunt.loadNpmTasks('grunt-contrib-less');
      grunt.loadNpmTasks('grunt-contrib-watch');
    
      grunt.registerTask('default', ['watch']);
    };

    Note that supplying /**/ in the watch path will watch files recursively under that directory.

    Step 4: Configure the package file

    If you do not have an existing package.json file in your project directory, create one:(创建Config file

    $ cd YOUR_PROJECT_DIRECTORY
    $ npm init

    When you have a valid package.json file, open it and add the following development dependencies: (设置需要哪些Dependencies

    "devDependencies": {
      "grunt": "~0.4.5",
      "grunt-contrib-less": "~0.11.0",
      "grunt-contrib-watch": "~0.6.1"
    },

    Then install the package dependencies:(在打Grunt的时候安装Dependencies

    $ npm install

    Step 5: Start Grunt

    $ grunt

    While Grunt is running, it will compile your stylesheets every time you 

    讨论,按照如上设置后会出现一个node_modules文件夹,里面有grunt, grunt-contrib-less, grunt-contrib-watch,由于其文件path太长,导致VS deploy的时候出错,并且会在Recycle bin里创建几千个offline.html, 建议每次deploy的时候手动把node_modules移出project。

  • 相关阅读:
    安装lamp服务器
    Linux ssh登录命令
    一些替代Xshell的软件推荐
    字符串输入的几种方式
    Java数据库操作的一些注意
    模拟堆
    web安全基础第一天
    情报搜集
    kali中的postgres怎么连接
    LeetCode:Validate Binary Search Tree
  • 原文地址:https://www.cnblogs.com/shawnzxx/p/4025567.html
Copyright © 2011-2022 走看看