4399成人黄a片,浪货趴办公桌～h揉,凹凸国产AV熟女白浆精品视频

Grunt是一個任務管理器，能大大提高您運行前端開發工作流程。使用大量的Grunt插件可以自動執行任務，例如編譯Sass和CoffeeScript，優化圖像和驗證您的JavaScript代碼與JSHint。
在過去你可能使用類似CodeKit或Hammer來處理這些任務。我認為這兩種應用程序是偉大的(過去廣泛的使用他們)，但Grunt比他們更優秀，他可以定制任務。有很多插件可以幫助你優化圖片和在你的工作流中加入CSS樣式。
在這篇文章里你將學習如何設置Grunt和配置Compass & Sass，JSHint和CSS連接的任務。

一:安裝Grunt CLI

我們第一件是要做的就是安裝Grunt CLI。這是在你的項目上安裝Grunt和加載Gruntfile.js（稍后詳細介紹）。
Grunt和Grunt插件安裝都需要使用npm，和Node.js包管理。如果你的機器上沒有安裝Node.js，可以訪問下載頁面為您的操作系統安裝程序。按照安裝向導中的步驟，你可以在任保時間啟動并運行npm安裝。
一旦你安裝好了Node.js和npm，你可以安裝grunt-cli
包。
npm install -g grunt-cli
使用-g標記安裝grunt-cli表示全局安裝，你可以在任何項目中使用這個命令。

創建package.json文件

現在，您已經完成了Grunt CLI安裝，可以使用Grunt管理任務。
為了更好的管理項目的依賴關系，需要給項目創建一個package.json。
package.json文件需要放置在你項目的根目錄下。這文件定義了項目的數據，如項目名，版本和作者。package.json文件還負責項目任務所需的依賴關系。devDependencies屬性定義了您的應用程序所需要的任務包。

{
  "name": "project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-compass": "~0.6.0"
  }
}

注：這是一個非常基本的例子中的package.json文件。為了全面了所有屬性，可以點擊此處查閱。
一旦你創建好了package.json文件，你可以在終端如此頭發下面的命令，安裝任務所需要的依賴關系：

$ npm install

這個命令將獲取所有的包，并把他們存儲在項目根目錄下的node_module目錄中。你可能要在這個目錄下添加.gitignore文件(或類似)，這樣才不至于將他們簽入版本控制器中。確保你的package.json文件添加到你的版本控制器中，用來確保其他開發人員在將使用這個項目需要的安裝包。
如果你想安裝任務包，你可以在命令行中運行npm install
進行安裝。你可以通過指定任務包安裝你想要的任務。

$ npm install <module> --save-dev

使用--save-dev可以通過npm自動將任務包安裝所需要依賴的關系添加到你的package.json文件中。安裝之后確認更新你自己的文件。

在Gruntfile中定義任務

接下來你要在你的項目根目中創建一個叫Gruntfile.js文件。這個文件用來定義和配置你想在Grunt運行的任務。
我們來看一個例子，配置你的package.json文件中指定的Grunt插件。

module.exports = function(grunt) {

  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      css: {
        files: [
          '**/*.sass',
          '**/*.scss'
        ],
        tasks: ['compass']
      },
      js: {
        files: [
          'assets/js/*.js',
          'Gruntfile.js'
        ],
        tasks: ['jshint']
      }
    },
    compass: {
      dist: {
        options: {
          sassDir: 'assets/sass',
          cssDir: 'assets/css',
          outputStyle: 'compressed'
        }
      }
    },
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: ['Gruntfile.js', 'assets/js/*.js']
    }
  });

  // 加載Grunt插件
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // 注冊grunt默認任務
  grunt.registerTask('default', ['watch']);
};

Wrapper函數

所有代碼都必須放置在Gruntfile文件中的wrapper函數中。這個約定了Grunt所有插件在這里配置。

module.exports = function(grunt) {
 // 配置任務和插件
};

項目配置

第二部分是在Gruntfile中配置項目。這是通過grunt.initConfig方法來配置。這種方法通過一個對象來實現，其中包含了項目配置以及任務配置。
pkg.grunt.file.readJSON('package.json')，直接從之前創建的package.json文件導入配置數據。依賴關系中提供了插件的名稱和版本。

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  task: {...},
  task_two: {...}
});

配置任務

每個Grunt任務都在grunt.configInit
中有自己配置的信息。屬性的名稱包含了任務的配置，包括Grunt任務的名稱和任務。
允許通過你的Gruntfile
文件配置運行指定的任務。
**watch
**任務是用來監控文件被改變時執行的任務。這個任務是有用的，例如，Sass文件修改保存后保存，這個任務會自動監控，將Sass文件編譯成CSS文件。具體的配置如下：

watch: {
  css: {
    files: [
      '**/*.sass',
      '**/*.scss'
    ],
    tasks: ['compass']
  },
  js: {
    files: [
      'assets/js/*.js',
      'Gruntfile.js'
    ],
    tasks: ['jshint']
  }
},

在這個任務中，我們指定了兩個不同的子任務。一個是處理Sass文件發生的變化，另一個是處理JavaScript文件發生的變化。files屬性用來監控任務中指定的兩種目標文件。你可以使用*
來匹配文件列表中的每個文件。tasks屬性定義了Grunt任務的數組，執行改變項目目標中的文件。
Gruntfile使用了grunt-contrib-compass插件來編譯Sass，你也可以添加Compass。如果你不使用Compass，還有一個Sass插件。你需要安裝Ruby，Sass和Compass才能安裝正常運行。

compass: {
  dist: {
    options: {
      sassDir: 'assets/sass',
      cssDir: 'assets/css',
      outputStyle: 'compressed'
    }
  }
},

配置Compass插件非常簡單。里面的options屬性定義了Sass文件的目錄和你想編譯出來的CSS文件目錄。outputStyle
屬性指定了Sass代碼要如何編譯。指定compressed
值，編譯出來的CSS將被壓縮。
接下來，我們看看JSHint任務。如果你之前沒有使用過，現在告訴你，JSHint是一個很好的工具，可以檢測你的JavaScript代碼是否有錯誤。它也可以用來幫助你統一代碼風格，以便你的代碼易于閱讀，方便團隊更好的做一個項目。

jshint: {
  options: {
    jshintrc: '.jshintrc'
  },
  all: ['Gruntfile.js', 'assets/js/*.js']
}
```
這里的`all`屬性用于指定哪些文件用JSHint來檢查。再次使用通配符(*)來指定選擇`assets/js`目錄下的所有JavaScript文件。

你可以指定`options`屬性，指定JSHint應該運行的`options`屬性。你可以直接在`Gruntfile`文件中列出這些選項或者把他們提出來放到一個`.jshintrc`文件中。

這里有一個簡單的`.jshintrc`文件的示例，他看起來像這樣：
```
{
  "node": true,
  "esnext": true,
  "curly": false,
  "smarttabs": true,
  "indent": 2,
  "quotmark": "single",
  "globals": {
    "jQuery": true
  }
}
```

**注意：**有關于JSHint中所有的選項列表，可以查閱[文檔](http://www.jshint.com/docs/options/)。
在本節中我們只觸及了我們所使用的Grunt任務的一些基本配置。更多的信息可以查看每個插件的文檔。
 [Watch文檔](https://github.com/gruntjs/grunt-contrib-watch)
 [Compass文檔](https://github.com/gruntjs/grunt-contrib-compass)
 [JSHint文檔](https://github.com/gruntjs/grunt-contrib-jshint)

###加載插件

第二部分在`Gruntfile.js`文件中加載你想使用的Grunt插件。這些插件需要在你的`package.json`文件中指定和使用`npm install`來安裝。如果你試圖運行沒有安裝的Grunt插件，將會報錯。
```
// 加載Grunt插件
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
```
###注冊默認任務
`grunt.registerTask`方法用來指定一個運行Grunt任務的默認組，當你運行`grunt`命令行會執行這指定的默認任務。
```
// 注冊默認的任務
grunt.registerTask('default', ['watch']);
```
該方法的第一個參籹指定任務的名稱(如本例中的`default`),第二個參數用來指定你希望執行的默認任務的組合。在前面的`watch`任務中我們定義了監測`compass`和`jshint`任務，所以我們只要在這里執行`watch`任務。
###運行Grunt
Grunt這些配置是非常強大的，但你如何在實際中運行Grunt呢？
在你的終端執行`grunt`命令，將會執行在`default`任務中指定的所有任務。
你也可以通過`grunt`后加對應的任務名，執行單獨的任務：
```
grunt //運行指定的默認任務
grunt compass //僅僅執行compass任務
```
###添加新的插件
現在您已經了解如何設置和運行Grunt，讓我們添加另一個插件[CSS樣式注入](http://css-tricks.com/style-injection-is-for-winners/)。這是一個很整潔的工具，更新瀏覽器中的CSS而無需刷新頁面。
先要安裝`grunt-browser-sync`任務包.使用`--save-dev`自動將插件插入`package.json`文件中。
```
npm install grunt-browser-sync --save-dev
```
你也需要在`Gruntfile`文件中加載插件：
```
grunt.loadNpmTasks('grunt-browser-sync')
```
接下來在`Gruntfile.js`文件中添加`browser_sync`任務的配置。指定了CSS文件應該被注入到的頁面中。這個插件也可以處理圖像、JavaScript和模板文件。然而，這些將觸發一個完整的頁面刷新。
```
browser_sync: {
  files: {
    src : [
      'assets/css/*.css',
      'assets/img/*',
      'assets/js/*.js',
      '**/*.html'
    ],
  },
  options: {
    watchTask: true
  }
},
```

這個`watchTask`選項設置為true
，因為我們使用了`watch`插件。因為我編譯Sass，我們需要確認任何任務執行的順序是正確的。否則瀏覽瀏覽器加入的CSS是`compass`任務之前生成的CSS文件。
**注意：**瀏覽器同步在測試跨設備變得更明顯，更強大。插件將決定網絡的IP地址，可以跨設備同步工作。然而，如果你使用的是自定義域名或瀏覽器同步找不到正確的IP地址，您可以指定`host`主機。
```
host: 'treehouse.dev'```
接下來，你需要更新默認任務，里面指定`browser_sync`任務。

```
grunt.registerTask('default', ['browser_sync', 'watch']);```

使用[WebSockets](http://blog.teamtreehouse.com/an-introduction-to-websockets)將消息發送到瀏覽器，觸發樣式的注入或頁面的更新，實現瀏覽器同步。如果你第一次執行`grunt`命令，將會給您的HTML添加兩行代碼，用來創建WebSocket連接。
```
<script src='http://YOUR_HOST:3000/socket.io/socket.io.js'></script>
<script src='http://YOUR_HOST:3001/browser-sync-client.min.js'></script>```

你已經完成了！您現在能夠更新你的CSS、JavaScript和HTML文件，自動在瀏覽器中更新頁面。每次修改文件不需要手動刷新瀏覽器窗口真爽。



-----------
英文原文：[http://blog.teamtreehouse.com/getting-started-with-grunt](http://blog.teamtreehouse.com/getting-started-with-grunt)
中文譯文：[http://www.w3cplus.com/tools/getting-started-with-grunt.html](http://www.w3cplus.com/tools/getting-started-with-grunt.html)

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

grunt由淺入深

grunt由淺入深

一:安裝Grunt CLI

創建package.json文件

在Gruntfile中定義任務

Wrapper函數

項目配置

配置任務

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

grunt由淺入深

一:安裝Grunt CLI

創建package.json文件

在Gruntfile中定義任務

Wrapper函數

項目配置

配置任務

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频