記學習前端構建工具gulp的過程，略心酸

　　初學前端的時候就聽過友人說，前端很差學，不少軟件都是要本身下載安裝插件的，當時是很不覺得然的，不就是下載幾個軟件外加安裝插件嗎？！怎麼會很難呢！後面才發現本身真的錯了。

　　今天恰好準備好好看看前端構建工具gulp的使用，因而乎就各類上網查資料。剛開始的時候有點摸不着頭腦，這個東西不是一個軟件，拿來就用，須要本身配置環境，本身根據需求安裝package，徹底是本身DIY的一個工具。

　　下面就把整個安裝過程，記錄下來，方便之後查看吧。

　　先明確幾個概念：一、gulp是基於node.js環境下工做的；二、命令行是指的那個黑框框，在OSX是終端（Terminal），在windows是命令提示符（CMD）；三、npm（node package manager）是nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；四、經常使用的命令行；

　　下面按照安裝的步驟來說述安裝的過程：

　　一、安裝node.js環境，在node.js官網下載安裝；

　　二、打開命令行工具，按照如下代碼，全局安裝gulp；

　，

　　三、建立一個用做gulp操做的文件夾（之後的一些構建任務均可以在這個文件夾中進行），並在該文件夾下新建如下兩個文件【package.json文件內要輸入一對花括號】，

　　四、以後在命令行工具內定位到3中建立的文件夾，並輸入圖中指令，如圖顯示的是運行以後的結果，此過程是在文件夾中安裝gulp並將gulp版本同步到package.json中。

　　以上四步操做完了以後gulp就算是安裝好了，那麼接下來就是安裝具體的插件，gulp很強大，可能用到的只是其中幾個插件而已。下面就以我安裝的第一個插件，css壓縮插件  gulp-minify-css  爲例說明

　　五、如同在again文件夾中安裝gulp同樣，只須要輸入下圖中代碼就能夠將該插件安裝到gulp中了【由圖中提示能夠看出來，gulp官方建議安裝gulp-clean-css來做爲gulp-minify-css的替代品】

　　六、安裝好插件以後就是使用了，這裏就要用到以前第三步中建立的gulpfile.js文件了。先說下插件的工做機理：安裝的插件其實就是gulp中的一個方法，在gulpfile.js中經過獲取這些方法，從而達到相應的功能。那麼實際上在js文件中，寫了什麼呢？看下圖，不不，這裏貼代碼比較合適。

var gulp = require('gulp'),
minifyCss = require("gulp-minify-css"); 　 //分別獲取gulp和gulp-minify-css這兩個框架【能夠這麼說嗎？】
 
gulp.task('minify-css', function () {　 　//定義任務，包括任務名和任務的內容
    gulp.src('css/*.css') 　　　　　　　　 //要壓縮的css文件
    .pipe(minifyCss()) 　　　　　　　　　  //壓縮css
    .pipe(gulp.dest('dist/css'));　　　　//壓縮後文件保存的位置
});

　　七、至此，全部準備工做都作好了，【安裝了gulp、安裝了minify-css插件、在gulpfile.js中寫了任務邏輯】接下來咱們把須要壓縮的文件地址輸入gulp.src('xxx’)中，而後打開命令行工具，定位到again文件夾下，敲入圖中圈出代碼。任務正確執行，寧且在指定目錄下生成了壓縮後的文件。

至此，本次gulp的探索算是告一段落，之後確定會用到更多的插件，到時候同時安裝多個插件應該也沒問題。

爲了減小文件數量，多個js任務能夠寫在一個文件裏面，下面是gulpfile.js文件的通常格式，

// 引入 gulp
var gulp = require('gulp'); 

// 引入組件
var minifyCss = require('gulp-minify-css');
// var jshint = require('gulp-jshint');
// var sass = require('gulp-sass');
// var concat = require('gulp-concat');
// var uglify = require('gulp-uglify');
// var rename = require('gulp-rename');

// CSS文件壓縮
gulp.task('minify-css', function () {
    gulp.src('css/main.css') // 要壓縮的css文件
    .pipe(minifyCss()) //壓縮css
    .pipe(gulp.dest('dist/css'));
});

// 檢查腳本
// gulp.task('lint', function() {
//     gulp.src('js/老師的框架.js')
//         .pipe(jshint())
//         .pipe(jshint.reporter('default'));
// });

// // 編譯Sass
// gulp.task('sass', function() {
//     gulp.src('./scss/*.scss')
//         .pipe(sass())
//         .pipe(gulp.dest('./css'));
// });

因爲我只安裝了gulp-minify-css這一個插件，若是不將其餘插件代碼註釋掉是會報錯的，各類未指定的變量啊啥的。。

 

【本文··完】