用咕unt編寫一個很棒的構建腳本

本指南演示瞭如何為現代Web項目配置強大的構建系統Grunt。 完成後，您的GruntFile將自動化任務，包括：文件複製，構建清理，帶有供應商前綴，CoffeeScript編譯，CSS和JavaScript Minification，Jade Compilation，Jade Compilation，對源更改的自動重建和本地開發服務器的自動重建服務器。

鍵概念

• > grunt設置： install node.js，npm和grunt cli。 將您的項目初始化為NPM軟件包，定義中的依賴項來管理Grunt插件。 package.json
• 任務配置：使用定義任務（例如，文件複製，清潔，STYLUS/COFFEESCRIPT/JADE彙編）。 子任務允許在單個任務中進行多個配置。 grunt.initConfig
• >自動化與優化： 槓桿插件（例如AutoPreeFixer（CSS供應商前綴），uglifyjs（JavaScript Minifie）（JavaScript Minification）和CSSMIN（CSS Compression）以增強性能。
>
• 開發工作流程：>實現用於自動重建源更改，而對於網絡訪問的開發服務器。 grunt-contrib-watch>grunt-contrib-connect自定義任務：
通過
• 創建自定義任務（例如，清潔，編譯，複製），促進模塊化和可維護性。 grunt.registerTask入門

> install node.js和npm。在全球安裝GRUNT CLI：。使用以下內容創建一個>文件：

>

npm install -g grunt-cli這定義了您的項目及其依賴性。 運行package.json以安裝它們。

<code class="language-json">{
  "name": "grunt_tutorial",
  "description": "Grunt setup for web development.",
  "author": "Landon Schropp (http://landonschropp.com)",
  "dependencies": {
    "grunt": "0.x.x",
    "grunt-autoprefixer": "0.2.x",
    "grunt-contrib-clean": "0.5.x",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-contrib-connect": "0.4.x",
    "grunt-contrib-copy": "0.4.x",
    "grunt-contrib-cssmin": "0.6.x",
    "grunt-contrib-jade": "0.8.x",
    "grunt-contrib-jshint": "0.6.x",
    "grunt-contrib-stylus": "0.8.x",
    "grunt-contrib-uglify": "0.2.x",
    "grunt-contrib-watch": "0.5.x"
  },
  "engine": "node >= 0.10"
}</code>

>文件複製並構建清理npm install

>

>分別維護源代碼並分別構建文件。 創建一個：

這將文件從Gruntfile.js>複製到

>並清潔

<code class="language-javascript">module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      build: {
        cwd: 'source',
        src: [ '**', '!**/*.styl', '!**/*.coffee', '!**/*.jade' ], // Exclude compiled files
        dest: 'build',
        expand: true
      },
    },
    clean: {
      build: { src: [ 'build' ] },
      stylesheets: { src: [ 'build/**/*.css', '!build/application.css' ] },
      scripts: { src: [ 'build/**/*.js', '!build/application.js' ] },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('build', ['clean:build', 'copy']);
};</code>

>目錄。 運行

。 source buildbuild（其餘部分詳細介紹了手寫筆，自動改裝器，CSS Minification，Coffeescript，uglify，Jade，Watch和Developption Server將遵循代碼片段和解釋的類似結構為了釋義，我在這裡省略了核心概念。相同。）grunt build

結論

>該簡化的指南為構建強大而有效的基於咕unt的構建過程奠定了基礎。 探索龐大的Grunt插件生態系統以進一步自定義您的工作流程。 >

以上是用咕unt編寫一個很棒的構建腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章！