[編輯器] 使用 sublime call grunt 檔案

在剛接觸 html 的時候，看見網路上其他人的專案都會有一些優化的動作，
比如說 壓縮圖片、合併 Js 等動作，
但自己實在是很不習慣製作 web 專案，還要開一堆軟體，才能把專案搞定上線，
但又迫於老闆說 "頻寬很貴捏！" 、"讀取速度好慢"、等問題，
只好乖乖打開一個個優化軟體，
後來才發現原來 grunt 要優化、要合併 js 檔案，它都有套件，
而且你只需要透過 sublime 來 trigger 一切都變得輕鬆許多！

用個 mix js 功能來說明
Step1. 首先裝好 node.js & grunt
Step2. 準備好 GruntFile.js ，內容為 將 js 資料夾底下 js檔案，合併並輸出為 app.js

module.exports = function(grunt) {
 grunt.loadNpmTasks('grunt-contrib-concat');
 // Project configuration. 
 grunt.initConfig({
  concat: {
   options: {
    separator: '\n',
   },
   dist: {
    src: ['js/*.js'],
    dest: 'js/app.js',
   },
  },
 });
 grunt.registerTask('default', ['concat']);
};

Step3.1 新增一個 sublime plugin ，範例明稱為 cmd.sublime-build，內容為執行 run.cmd 檔案

{
 "cmd": "run.cmd"
};

Step4.1. run.cmd 內容就是 grunt 啦！

grunt

這樣下次只要需要合併的時候，在工具中選擇 cmd 就會直接呼叫外部的 run.cmd 檔案執行 grunt，當然如果有使用 Visual Studio 內建就會有 合併 js 的功能了。

======================================================================Step3.2

這裡也可以使用 sublime install package 安裝 sublime 的 grunt


輸入之後就會看到你所準備的 grunt 任務



但 sublime 這個套件 找grunt 找很久就是了 ...
所以還是會用比較快的方法啦！