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

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

    Glup的安裝。

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

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

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

    在前進(jìn)之前，讓我們打破每個(gè)部分的命令意味著什么。

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

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

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

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

    改變到項(xiàng)目目錄

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

    對(duì)一個(gè)項(xiàng)目使用Glup

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

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

    package.json是什么？

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

    創(chuàng)建一個(gè)gulpfile

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

    讓我們?yōu)槲覀兊捻?xiàng)目創(chuàng)建一個(gè)gulpfile，touch gulpfile.js。

    安裝Glup插件

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

    node_modules目錄

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

    設(shè)置一個(gè)Glup的任務(wù)

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

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

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

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

    使用項(xiàng)目的依賴關(guān)系，一旦我們告訴喝我們的依賴關(guān)系是什么，我們可以設(shè)置一個(gè)任務(wù)。我們將創(chuàng)建一個(gè)Glup任務(wù)命名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)建了一個(gè)任務(wù)styles。這是我們的參考我們的任務(wù)。我們可以用這個(gè)名字在其他Glup的任務(wù)或者從命令行調(diào)用它。包裝內(nèi)的任務(wù)，我們寫(xiě)什么本質(zhì)上是劇本的任務(wù)。Glup任務(wù)包裝的一般格式是：

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

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

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

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

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

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

    運(yùn)行一個(gè)任務(wù)

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

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

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

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

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

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

    創(chuàng)建新任務(wù)

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

    使用JSHint ，我們可以安裝,需要個(gè)Glup插件gulp-jshint。首先，讓我們安裝gulp-jshint插件項(xiàng)目。npm install gulp-jshint --save-dev 接下來(lái)，讓我們修改我們的依賴關(guān)系聲明聽(tīng)gulpfile：

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

    所以現(xiàn)在我們有 sass()，concat()和 jshint()在這一點(diǎn)上。讓我們來(lái)建立一個(gè)任務(wù)jshint。這個(gè)Glup任務(wù)將運(yùn)行g(shù)ulp-jshint。js文件在js目錄。

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

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

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

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

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

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

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

    $ 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屬性很多工作，了解前綴是所有在它自己的一份工作。幸運(yùn)的是有一個(gè)包Autoprefixer將為我們做所有的努力工作。安裝gulp-autoprefixer插件到你的項(xiàng)目中使用下面的命令：npm install gulp-autoprefixer --save-dev  添加我們需要gulp-autoprefixer插件依賴項(xiàng)聲明。

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

    修改 styles任務(wù)管gulp-autoprefixer插件的過(guò)程。

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

    確保您的目標(biāo)正確的瀏覽器，你可以通過(guò)在一個(gè)逗號(hào)分離瀏覽器支持的列表。

    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。完整列表的值可以通過(guò)在可以在這找到Browserslist.在這一點(diǎn)上，我們有三個(gè)Glup的任務(wù)都服務(wù)于一個(gè)目的構(gòu)建過(guò)程：

    stylesCSS——處理過(guò)程相關(guān)

    jshint——檢查我們的JavaScript文件

    watch——自動(dòng)運(yùn)行 styles和 watch每當(dāng)Glup檢測(cè)任務(wù)的變化我們的源文件。

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

    1、編譯我們的Sass CSS

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

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

    4、檢查我們的.js文件錯(cuò)誤

    5、看源文件的變化并自動(dòng)重新運(yùn)行任務(wù)

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

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