VS2015前端工具：NPM和Web Essentials

1.寫作背景

    想在5月份前換個工作環境了，“檢討”一下自己混飯的技術水平和處世的人脈關系，覺得很不給力！為人方面，人各有志也就不糾結了，但本領得盡量提高一下。

    我也不擅長寫博客，也發覺以前寫過的，要不半途而廢，要不質量慘不忍睹，所以以前博文干脆全部刪除，試着再回顧一遍也罷！

2.本章概述

    VS2015 CTP6下的NPM（bower及grunt）和Web Essentials基本安裝和使用.如果你是web前端開發人員，建議熟練掌握。

3.NPM

    a package manager for JavaScript. 它是一個使用Node.js技術的包管理和分發工具，可以方便地找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。

    注：官方https://www.npmjs.com

4.Bower

    web包配置管理工具，允許您下載（一般從github等托管源碼網站）和安裝或還原軟件包，一般處理是 JavaScript 和 CSS 庫等靜態文件。

    注：對於靜態文件安裝包，仍可以使用 NuGet 程序包管理器。NPM技術應用非常廣泛，VS沒有理由不集成它。

5.Grunt

    基於Javascript（使用NPM)技術的task runners。task runners是一個應用程序，或者說它是一個任務工具。

6.Web Essentials

    它是VS擴展插件，是 編寫CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS一款強大web開發輔助工具。

    注：官方http://vswebessentials.com

7.創建項目

    為了演示說明，我們創建解決方案名為：GiveCaseBlog,項目模板采用ASP.NET 5 Preview Web API名為:GiveCaseBlog.WebApies,其目錄：

    

8.添加grunt及bower

    右鍵項目“Add":

    

    此時目錄會出現：

    

9.下載安裝包配置

    打開bower.json修改如下（這里舉例下載三個安裝包）：   

{
    "name": "bower",
    "license": "Apache-2.0",
    "private": true,
    "dependencies": {
        "jquery": "2.1.3",
        "jquery-validation": "1.13.1",
        "jquery-validation-unobtrusive": "3.2.2"
    },
    "exportsOverride": {
        "jquery": {
            "": "dist/*.*"
        },
        "jquery-validation": {
            "": "dist/jquery.validate.{js,min.js}"
        },
        "jquery-validation-unobtrusive": {
            "": "jquery.validate.unobtrusive.{js,min.js}"
        }
    }
}

     注：安裝時exportsOverride配置的復制文件路徑要和bower_components下載過的安裝包里要復制文件路徑一致！

           配置dependencies下載的安裝包版本，如果不知道確切的版本，就等loading之后選擇版本！  

    上面配置完畢，保存bower.json文件，就開始下載了。完成后目錄：

    

10.安裝安裝包

     這里說靜態文件安裝，指的是復制到（包含到）項目中。前面我們已經下載過三個安裝包了，可是沒有在wwwroot（這個是web項目部署時根目錄）文件下出現！

     打開package.json，改為：

{
    "name": "package",
    "version": "1.0.0",
    "private": true,
    "devDependencies": {
        "grunt": "0.4.5",
        "grunt-bower-task": "0.4.0"
    }
}

     確定之后，目錄出現：

       

     再打開gruntfile.js文件，其代碼為：

/*定義grunt任務和使用grunt插件*/

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/Libraries",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
    });

    grunt.registerTask("default", ["bower:install"]);
    grunt.loadNpmTasks("grunt-bower-task");
};

      右鍵gruntfile.js文件：

      

      此時出現：

      

      右鍵bower選擇Run，沒有錯誤信息的話，目錄會有：

      

      OK，我們就完成了復制的過程。（注：后面會介紹自動完成這個過程配置及設置） 

11.壓縮css

     在項目根目錄下，創建Styles文件夾，並在其填加test.css文件，代碼為：

body {
    background-color: #ffd800;/*背景顏色*/
}

a {
    text-decoration: none;
}

      注：此文件有注釋，有空格換行的。

      打開package.json，在  "devDependencies"里添加："grunt-contrib-cssmin": "0.12.2" 

      修改gruntfile.js代碼為： 

/*定義grunt任務和使用grunt插件*/

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/Libraries",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        /*壓縮css*/
        cssmin: {
            target: {
                options: {
                    sourceMap: true,
                },
                files: {
                    /*輸出文件路徑：原始文件路徑*/
                    "wwwroot/Styles/test.min.css": "Styles/test.css"
                }
            }
        },

    });

    grunt.registerTask("default", ["bower:install"]);
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-cssmin"); /*壓縮css*/
};

      再打開Task Runner Explorer:

      

      執行Run之后，目錄出現：

      

      查看test.min.css代碼：

      

      OK！去掉換行，空格，注釋了！

12.壓縮js

      在項目根目錄下，創建Scripts文件夾，並其添加test.js文件，其代碼為：

/*測試*/
function Hello() {
    alert("Hello");
}

function World() {
    alert("World");
}

     注釋：同樣有空格，換行，注釋！

     打開package.json，在  "devDependencies"里添加："grunt-contrib-uglify": "0.8.0" 

     修改gruntfile.js代碼為：

/*定義grunt任務和使用grunt插件*/

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/Libraries",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        /*壓縮css*/
        cssmin: {
            target: {
                options: {
                    sourceMap: true,
                },
                files: {
                    /*輸出文件路徑：原始文件路徑*/
                    "wwwroot/Styles/test.min.css": "Styles/test.css"
                }
            }
        },
        /*壓縮js*/
        uglify: {
            target: {
                options: {
                    sourceMap: true,
                },
                files: {
                    "wwwroot/Scripts/test.min.js": "Scripts/test.js"
                }
            }
        },

    });

    grunt.registerTask("default", ["bower:install"]);
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-cssmin"); /*壓縮css*/
    grunt.loadNpmTasks("grunt-contrib-uglify");  /*壓縮js*/
};

       同樣執行Run后，代碼會壓縮成：

       

13.編譯less

       在項目根目錄下，創建Lesses文件夾，並其添加site.less文件，其代碼為：

1 2 3 4 5 6 7 8 9 10

/*定義變量*/ @body-bg-color: #ff6a00;   body {      }   #container {      width: 960px; }

        打開package.json，在  "devDependencies"里添加："grunt-contrib-less": "1.0.0"

         修改gruntfile.js代碼為：

/*定義grunt任務和使用grunt插件*/

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/Libraries",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        /*壓縮css*/
        cssmin: {
            target: {
                options: {
                    sourceMap: true,
                },
                files: {
                    /*輸出文件路徑：原始文件路徑*/
                    "wwwroot/Styles/test.min.css": "Styles/test.css"
                }
            }
        },
        /*壓縮js*/
        uglify: {
            target: {
                options: {
                    sourceMap: true,
                },
                files: {
                    "wwwroot/Scripts/test.min.js": "Scripts/test.js"
                }
            }
        },
        /*編譯less*/
        less: {
            //開發版（無壓縮）
            development: {
                options: {
                    sourceMap: true
                },
                files: {
                    "wwwroot/Styles/site.css": "Lesses/site.less"
                }
            },
            //生產版（壓縮）
            production: {
                options: {
                    compress: true
                },
                files: {
                    "wwwroot/Styles/site.min.css": "Lesses/site.less"
                }
            }
        },

    });

    grunt.registerTask("default", ["bower:install"]);
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-cssmin"); /*壓縮css*/
    grunt.loadNpmTasks("grunt-contrib-uglify");  /*壓縮js*/
    grunt.loadNpmTasks("grunt-contrib-less");   /*編譯less*/
};

        執行Run后，編譯后分別輸出一個壓縮版，一個未壓縮版css文件，目錄：

        

14.任務監視

        問題來了： 前面介紹任務需要每次Run，是不是很傻蛋，能不能修改原始文件保存后，自動執行任務？

        打開package.json，在  "devDependencies"里添加："grunt-contrib-watch": "0.6.1"

        修改gruntfile.js代碼為：

       

/*定義grunt任務和使用grunt插件*/

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/Libraries",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        /*壓縮css*/
        cssmin: {
            target: {
                options: {
                    sourceMap: true,
                },
                files: {
                    /*輸出文件路徑：原始文件路徑*/
                    "wwwroot/Styles/test.min.css": "Styles/test.css"
                }
            }
        },
        /*壓縮js*/
        uglify: {
            target: {
                options: {
                    sourceMap: true,
                },
                files: {
                    "wwwroot/Scripts/test.min.js": "Scripts/test.js"
                }
            }
        },
        /*編譯less*/
        less: {
            //開發版（無壓縮）
            development: {
                options: {
                    sourceMap: true
                },
                files: {
                    "wwwroot/Styles/site.css": "Lesses/site.less"
                }
            },
            //生產版（壓縮）
            production: {
                options: {
                    compress: true
                },
                files: {
                    "wwwroot/Styles/site.min.css": "Lesses/site.less"
                }
            }
        },
        /*任務監視*/
        watch: {
            less: {
                files: ["Lesses/*.less"],
                tasks: ["less:development"]/*舉例監視編譯less開發版，並未監視生產壓縮版*/
            }
        }
    });

    grunt.registerTask("default", ["bower:install"]);
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-cssmin"); /*壓縮css*/
    grunt.loadNpmTasks("grunt-contrib-uglify");  /*壓縮js*/
    grunt.loadNpmTasks("grunt-contrib-less");   /*編譯less*/
    grunt.loadNpmTasks("grunt-contrib-watch");/*任務監視*/
};

    把監視開啟（執行Run）：

    

    此時不要退出（關閉）watch(running)窗口。

    我們修改Lesses\site.less文件里代碼，並保存此文件，這時wwwroot\Styles\site.css也會隨之改變，但site.min.css並未變化。

15.綁定任務

    在監視任務，我們演示了需要watch(running)窗口不要關閉，同樣是很笨的，能不能在打開項目時，讓它自動執行Run!這就綁定任務即可。

    

    設置后：

    

    OK!這樣vs打開項目時，自動執行此監視任務！（注：綁定項還有別的哦）

16.注冊任務

    在gruntfile.js添加：grunt.registerTask("production", ["less:production"]);

    這樣在Alias項里：

     

17.Web Essentials 安裝

     打開vs-》Tools-》Extensions and Updates:

     

18.Web Essentials使用

      下面示例按下Tab鍵生成代碼片段：

        1: 示例div#container1 

          <div id="container1"></div>

        2: 示例div.container2

          <div class="container2"></div>

        3: 示例div>ul  

          <div>

            <ul></ul>

          </div>

      4: 示例div#head>ul.menu 

          <div id="head">

             <ul class="menu"></ul>    

          </div>

      5: 示例 ul>li*3 

        <ul>    

            <li></li>  

            <li></li>  

            <li></li>   

        </ul> 

      6: 示例div#head>nav.menu>ul>li*3 

         <div id="head">

             <nav class="menu">          

                <ul>                

                   <li></li>             

                   <li></li>       

                   <li></li>            

              </ul>       

            </nav>    

        </div>

      7: 示例div#head>nav.menu>ul>li#item$*3

           <div id="head">    

              <nav class="menu">         

                  <ul>             

                   <li id="item1"></li>            

                  <li id="item2"></li>              

                  <li id="item3"></li>       

               </ul>      

            </nav>    

         </div>

       8: 示例div#head>nav.menu>ul>li#item$$*3  

          <div id="head">       

            <nav class="menu">           

             <ul>           

                <li id="item01"></li>             

                <li id="item02"></li>         

                <li id="item03"></li>        

            </ul>      

          </nav>    

        </div>

    9: 示例div.container>(header>nav)+(div.row>div.context*3) 

     <div class="container">      

         <header>       

            <nav></nav>        

       </header>   

       <div class="row">           

         <div class="context"></div>      

         <div class="context"></div>            

         <div class="context"></div>   

       </div>   

    </div>

    選擇行快捷鍵：

    把光標所在行選中使用  Alt+1鍵，再一次按Alt+1將選擇兄弟元素所有行，再一次按Alt+1將選擇包含換行空行兄弟元素行 ；

    按下Shift+Alt+W將選擇的元素外加個新的元素。

    其它快捷鍵：

    ctrl+shift+上下鍵可以讓css顏色值變深淺

19.小結

     這篇文章有些臭長了，還有一些舉一反三的用法沒有介紹。不過已經掌握文中所述，基本上夠用。比如使用npm工具來合並css或js沒有介紹到，還有測試css,js,html代碼也沒有提到，再比如壓縮編碼圖片也沒有介紹到。再有Web Essentials好多使用技巧也沒說到，其實它也可以干編譯，壓縮和合並等功能。

     那么說NPM這樣安裝和配置起來，是不是很暈？ 其實，我預計VS2015正式版發布后，可能不需要這么繁瑣了。總之，此文對你不使用VS開發環境，使用NPM也是很有幫助的。