初步接觸gulp

          首先是安裝nodejs，經過nodejs的npm全局安裝和項目安裝gulp，其次在項目裏安裝所須要的gulp插件，而後新建gulp的配置文件gulpfile.js並寫好配置信息（定義gulp任務），最後經過命令提示符運行gulp任務

          1.安裝node.js：https://nodejs.org/en/，再安裝淘寶鏡像，cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

          2.安裝：命令提示符執行cnpm install gulp -g

          3.本地安裝：cnpm install gulp-less --save-dev                 cnpm install gulp --save-dev

             咱們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能（反正不安裝會報錯）

          4.新建package.json文件，能夠手工創建，也能夠在控制檯輸入npm init   而後根據提示填完信息，會自動在該目錄下生成一個package.json文件       

          6.繼續在控制檯安裝所需的插件，如：npm install gulp-imagemin --save -dev //圖片壓縮插件

          7.在項目根目錄中新建gulpfile.js文件，而後往裏面寫入執行代碼

          

var gulp = require('gulp'); //獲取gulp
var browsersync = require('browser-sync').create();//獲取browsersynvar

htmlmin = require('gulp-htmlmin'); //require()的做用感受和python中的import相同，之後再研究

 

gulp.task('html', function() { //gulp.task定義任務，這裏的html是任務名稱，之後調用的時候能夠用上，function()是任務要執行的代碼，中間還有一個參數，是當前定義的任務須要依賴的其餘任務，爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數


    gulp.src('*.html')                     //gulp.src  獲取流,一個虛擬文件對象流           
        .pipe(htmlmin({
            collapseWhitespace: true,            //壓縮html
            collapseBooleanAttributes: true,     //省略布爾屬性的值
            removeComments: true,                //清除html註釋
            removeEmptyAttributes: true,         //刪除全部空格做爲屬性值
            removeScriptTypeAttributes: true,    //刪除type=text/javascript
            removeStyleLinkTypeAttributes: true, //刪除type=text/css
            minifyJS:true,                       //壓縮頁面js
            minifyCSS:true                       //壓縮頁面css
        }))
        .pipe(gulp.dest('dist'))
        .pipe(browsersync.stream());
});
    
gulp.task('serve', ['clean'], function() {gulp.start('scripts','style','image','html');
    browsersync.init({
        port: 2016,
        server: {
            baseDir: ['dist']
 }

gulp.watch('*.html', ['html']);       //gulp.watch用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務,第一個參數是監視的對象，最後一個是任務名稱，是個數組

　　

　　   8.作完上面的步驟以後，能夠運行了，學到了一招快速切換到項目目錄的方法，不用cd。。。只要在目錄空白處同時點擊shift和鼠標右鍵，而後選擇「在此處打開命令窗口」，就達到目的了，而後輸入gulp，正常的話，能夠在谷歌瀏覽器打開

         

         

         9.而後嘗試修改html文件，發現控制檯有監控到文件變化，可是瀏覽器確沒有自動刷新，好納悶地又看了一遍代碼，代碼是copy下來的，半懂不懂

         10.略失望，最後百度了下，找到了緣由，加上完整的結構以後能夠了，收工，哈哈，接下來要繼續學習才行，真是太愛自動刷新這個功能了。