現(xiàn)代的網(wǎng)絡中任何工具都有其使用“壽命”，當它的功能運速不能夠滿足程序員的要求時勢必會有一種新型工具誕生來取代它。那今天筆者小丹也大家分享的這種新型工具就是Glup。

    Glup是一個構(gòu)建自動化工具。Gulp的code-over-configuration以一種更有效的方法不只讓撰寫任務更加容易，也更好閱讀及維護。而不管是多個應用程序提供工具對于我們的個人項目，Glup可以為我們提供一個自動構(gòu)建過程。如果我們要使用Git就必須發(fā)出以下命令:git clone https://github.com/drewminns/sixrevisions_gulpstarter.git。那如何來使用Glup呢？

    Glup的安裝。

    Glup利用JavaScript應用程序平臺稱為節(jié)點，js為我們提供了一個環(huán)境中運行應用程序。節(jié)點的特性之一—除了一個強大的工具來開發(fā)應用程序，包管理器，節(jié)點的缺省包管理器被稱為npm。為了使用npm和Glup，需要安裝節(jié)點。而一旦你安裝了節(jié)點，就需從命令行可以使用npm安裝Glup和任何其他包你需要。

    在你的CLI發(fā)出以下命令：npm install gulp -g

    如果你有困難：使用超級用戶特權(quán)。如果上面的命令不工作，前綴的命令sudo。這個命令意味著超級做，使管理員(超級用戶)訪問文件系統(tǒng)。只要你有一個問題執(zhí)行命令，添加sudo開始的命令：sudo npm install gulp -g 輸入上面的命令，你可以要求你的密碼。原因是我們正試圖安裝全球Glup包在我們的系統(tǒng)，如果你開始輸入你的密碼，你不會看到任何字符輸入。

    在前進之前，讓我們打破每個部分的命令意味著什么。

    npm是命令npm的范圍內(nèi)工作。

    install是執(zhí)行的行動的范圍內(nèi)npm。

    gulp是我們想要安裝的包的名稱。

    -g是一個命令選項/標記代表了全命令。使用這個命令選項，我們看整個系統(tǒng)。

    改變到項目目錄

    如果一切成功安裝，沒有錯誤，繼續(xù)改變你的工作目錄的目錄下載示例文件。cd /your/project/directory 這將是我們的項目目錄本教程。

    對一個項目使用Glup

    一旦我們有Glup安裝在我們的系統(tǒng)，我們可以進入自動化項目。

    創(chuàng)建一個包。json文件運行以下命令：npm init 當您輸入命令時，將看到創(chuàng)建一個名為package.json的文件的能力。盡你所能填寫字段，最后你會發(fā)現(xiàn)一個新創(chuàng)建的包。json在項目文件目錄。

    package.json是什么？

    package.json文件包含關于您的項目的信息。作為我們的項目我們添加更多的包，這些包的文件也將作為一個清單，告訴我們需要哪些文件系統(tǒng)。如果我們將我們的項目轉(zhuǎn)移到另一臺計算機或使用另一個開發(fā)人員想要使用相同的構(gòu)建任務package.json文件將作為一個清單。

    創(chuàng)建一個gulpfile

    使用的引擎gulpfileGlup.js文件。這個JavaScript文件通常引用作為聽gulpfile。gulpfile條款。js和gulpfile在本教程的上下文是同義的。一個gulpfile允許我們在我們的項目中創(chuàng)建任務和自動化。gulpfile的內(nèi)容，js將因項目而異。

    讓我們?yōu)槲覀兊捻椖縿?chuàng)建一個gulpfile，touch gulpfile.js。

    安裝Glup插件

    即使我們安裝Glup在我們的系統(tǒng)，我們也需要將其安裝在我們的項目目錄。運行以下命令：npm install gulp --save-dev接下來，讓我們安裝一些Glup插件，允許我們編譯Sass CSS文件，然后結(jié)合都成一個CSS文件。在命令行中，鍵入以下:npm install gulp-sass gulp-concat --save-dev

    node_modules目錄

    你會發(fā)現(xiàn)一個node_modules目錄創(chuàng)建發(fā)布后在你的項目目錄npm install命令。這個目錄包含所有必需的文件運行插件。當我們安裝Glup插件和節(jié)點包，他們將被放置在node_modules。

    設置一個Glup的任務

    gulpfile之內(nèi)。js，我們現(xiàn)在可以設置一飲而盡的任務。gulpfile開放，js在您最喜歡的代碼編輯器和讓我們的編碼。

    指定項目的依賴關系，節(jié)點的require()函數(shù)允許我們指定所需的插件來運行我們的Glup的任務。這些被稱為依賴項。我們依靠他們Glup的任務工作。我們不是調(diào)用 require()函數(shù)每次我們想?yún)⒖嘉覀兊牟寮?，我們不管require()函數(shù)返回到JavaScript對象。

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        concat = require('gulp-concat');

    所以現(xiàn)在，當我們使用 sass()功能在我們的代碼中，我們討論的gulp-sass插件。當我們使用concat()。我們引用gulp-concat插件。

    使用項目的依賴關系，一旦我們告訴喝我們的依賴關系是什么，我們可以設置一個任務。我們將創(chuàng)建一個Glup任務命名styles.

    gulp.task('styles', function() {
      return gulp.src('styles/*.scss')
        .pipe(sass({
          'sourcemap=none': true    }))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('styles/'))  });

    在上面的代碼塊中，我們已經(jīng)創(chuàng)建了一個任務styles。這是我們的參考我們的任務。我們可以用這個名字在其他Glup的任務或者從命令行調(diào)用它。包裝內(nèi)的任務，我們寫什么本質(zhì)上是劇本的任務。Glup任務包裝的一般格式是：

    gulp.task('name-of-the-task', function() {  // The guts go here });

    return聲明說，styles任務將返回一個值的時候執(zhí)行。在這種情況下是我們的加工代碼的價值。我們使用一個Glup方法調(diào)用 .src()得到我們想要的并指定輸入文件運行styles任務scss文件。將星號(*)在一個特定文件名的地方，我們本質(zhì)上是說，去找任何文件的擴展。scss內(nèi)部樣式目錄。

    gulp.task('styles', function() {  return gulp.src('styles/*.scss')  });

    現(xiàn)在是Glup的一部分，鏈接我們想和節(jié)點的執(zhí)行的過程pipe()方法。pipe()方法允許我們通過代碼從一個過程到另一個地方。當一個插件處理我們。scss文件輸出傳遞到下一個插件。

    gulp.task('styles', function() {
        return gulp.src('styles/*.scss')
            .pipe(sass({
                'sourcemap=none': true }))
            .pipe(concat('style.css'))
            .pipe(gulp.dest('styles/'));  });

    這就是我們的styles任務：得到我們想要的和指定文件的過程。為此，我們使用.src()方法來獲取和指向。scss樣式目錄內(nèi)的文件。編譯Sass CSS文件。請記住，我們實例化 sass()函數(shù)它指的是gulp-sass插件。所有CSS樣式規(guī)則組合到一個樣式表。gulp-concat插件創(chuàng)建一個樣式表聽命名風格。css聽包含我們所有的css。風格的樣式表目錄css文件將被放置在樣式目錄。這是完成了 .dest()方法。

    運行一個任務

    現(xiàn)在關鍵時刻，運行的任務。運行的任務，首先要確保你的工作目錄就是你gulpfile下面的命令將不會工作。我們的任務，您可能還記得，就是以他命名的styles。運行styles任務問題這個命令：gulp styles 我們的styles任務將運行，它應該編譯。scss文件到一個文件中叫做風格。css將放置在樣式目錄。

    一個小問題，這有點艱苦之間來回切換代碼和命令行編譯Sass每次我們更新我們的代碼。看你的源文件的變化Glup有一個內(nèi)置的方法調(diào)用 .watch()，讓我們告訴Glup尋找我們的源文件的任何更改。這樣，每當我們更新我們的任何。scss文件我們styles任務將自動執(zhí)行和重新編譯的樣式css文件。讓我們創(chuàng)建另一個Glup任務看源文件。我們將名字這一飲而盡的任務watch。就像我們的tyles任務，我們將創(chuàng)建 watch任務使用包裝。

    gulp.task('watch', function() {    // The guts goes here });

    這就是watch任務會做：使用Glup的 .watch()監(jiān)視任何改變我們的方法。scss文件。每當Glup檢測到一個變化我們styles任務將被執(zhí)行。

    gulp.task('watch', function() {    gulp.watch('styles/*.scss', ['styles']); });

    現(xiàn)在不是運行gulp styles每當我們想要編譯Sass，我們可以運行gulp watch只有一次當我們從事一個項目。Glup會看我們的Sass文件進行任何改變。當我們看到有更新Sass文件，它會自動運行styles的任務。這將會發(fā)生在我們保存scss文件。

    創(chuàng)建新任務

    Glup有一個龐大的社區(qū)，現(xiàn)在有超過1400的插件。我們可以改善我們與這些插件的構(gòu)建過程。讓我們創(chuàng)建另一個Glup任務。這個新任務將分析我們的JavaScript文件找到常見問題。對于這一大口的任務，我們將依靠JSHint。JSHint是一個JavaScript代碼質(zhì)量分析工具。JSHint會在聽一字不漏地仔細閱讀我們的JavaScript聽文件如果這地方有問題，它將在我們的命令行打印問題。

    使用JSHint ，我們可以安裝,需要個Glup插件gulp-jshint。首先，讓我們安裝gulp-jshint插件項目。npm install gulp-jshint --save-dev 接下來，讓我們修改我們的依賴關系聲明聽gulpfile：

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        concat = require('gulp-concat'),
        jshint = require('gulp-jshint');

    所以現(xiàn)在我們有 sass()，concat()和 jshint()在這一點上。讓我們來建立一個任務jshint。這個Glup任務將運行gulp-jshint。js文件在js目錄。

    gulp.task('jshint', function() {
        return gulp.src('js/*.js')
            .pipe(jshint())  });
    我們的任務不需要任何文件輸出。相反，如果JSHint捕獲任何錯誤我們將通過我們的命令行通知。運行的任務我們可以發(fā)出以下命令：gulp jshint 我們也可以添加jshint我們的任務watch任務所以我們不必手動稱之為每當我們更改JavaScript文件。

    gulp.task('watch', function() {
      gulp.watch('styles/*.scss', ['styles']);
      gulp.watch('js/*.js', ['jshint']);  });

    添加流程現(xiàn)有的任務

    我們可以很容易地添加更多的事情要做我們現(xiàn)有的任務?，F(xiàn)在讓我們來做。讓我們安裝一個附加插件，它將給我們一個更加可讀的輸出。運行以下命令安裝JSHint-stylish圖書館對我們的項目。npm install jshint-stylish --save-dev

    我們可以修改jshint任務，以便它使用jshint-stylish作為我們的記者。

    gulp.task('jshint', function() {
        return gulp.src('js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('jshint-stylish'))   });

    讓我們運行jshint任務：gulp jshint 如果JSHint發(fā)現(xiàn)錯誤和代碼質(zhì)量問題，它將在我們的命令行輸出。

    $ gulp jshint
     [10:29:57] Starting 'jshint'...
    \js\main.js
      line 2  col 7  Use '===' to compare with '0'.
        1 warning
     [10:29:57] Finished 'jshint' after 93 ms

    Auto-prefix CSS屬性

    Vendor-prefixing CSS屬性很多工作，了解前綴是所有在它自己的一份工作。幸運的是有一個包Autoprefixer將為我們做所有的努力工作。安裝gulp-autoprefixer插件到你的項目中使用下面的命令：npm install gulp-autoprefixer --save-dev  添加我們需要gulp-autoprefixer插件依賴項聲明。

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        concat = require('gulp-concat'),
        jshint = require('gulp-jshint'),
        autoprefixer = require('gulp-autoprefixer');

    修改 styles任務管gulp-autoprefixer插件的過程。

    gulp.task('styles', function() {
      return gulp.src('styles/*.scss')
        .pipe(sass({
          'sourcemap=none': true  }))
        .pipe(concat('style.css'))
        .pipe(autoprefixer())
        .pipe(gulp.dest('styles/'));  });

    確保您的目標正確的瀏覽器，你可以通過在一個逗號分離瀏覽器支持的列表。

    gulp.task('styles', function() {
      return gulp.src('styles/*.scss')
        .pipe(sass({
          'sourcemap=none': true }))
        .pipe(concat('style.css'))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
        .pipe(gulp.dest('styles/'));  });

    上面將支持所有瀏覽器的最后2版本，Safari 5。IE 8和9，Opera 12.1。完整列表的值可以通過在可以在這找到Browserslist.在這一點上，我們有三個Glup的任務都服務于一個目的構(gòu)建過程：

    stylesCSS——處理過程相關

    jshint——檢查我們的JavaScript文件

    watch——自動運行 styles和 watch每當Glup檢測任務的變化我們的源文件。

    不過，我們可以做一個主任務，完成了所有這些?，F(xiàn)在我們可以運行gulp watch并將開始watch任務，進而等待我們改變我們的文件。然而，如果我們想要的文件被編譯并立即檢查，然后看著改變所有通過簡單地打字gulp。在gulpfile.js添加一個新的任務 default,而是使用一個函數(shù)的第二個參數(shù)，使用一個數(shù)組。gulp.task('default', []); 在這個數(shù)組，我們可以通過任務訂單我們希望他們來看。gulp.task('default', ['styles', 'jshint', 'watch']);現(xiàn)在當我們運行gulp在命令行我們的項目目錄它將：

    1、編譯我們的Sass CSS

    2、所有的CSS合并成一個文件叫做styles.css

    3、添加前綴到適當?shù)腃SS屬性

    4、檢查我們的.js文件錯誤

    5、看源文件的變化并自動重新運行任務

    想象有手動完成所有的任務，每一次你更新你的源代碼。這不僅是構(gòu)建過程乏味的沒有任務殺手，但也容易出現(xiàn)人為錯誤。

    (轉(zhuǎn)載請注明轉(zhuǎn)自：mjyil.cn/news/n1669.htm，謝謝!珍惜別人的勞動成果，就是在尊重自己!）