這年頭,不用點道具(gulp),你都很差意思說你是作前端的

若是你之前沒用用過任何任務腳本(task runner)或者命令行工具,那也不要懼怕,這篇文章能夠一步步教你上手gulp,升職CEO,贏娶白富美,走上人生巔峯,吼吼吼,好開森,有木有?!我會分爲五步向你介紹gulp並幫助你完成一些屌炸天的事情。話很少說,直接開始吧。css

第一步:安裝Node

首先,最基本也最重要的是,咱們須要搭建Node環境。訪問node官網,而後點擊大大的綠色的install按鈕,下載完成後直接運行程序,就一切準備就緒。npm1會隨着安裝包一塊兒安裝,稍後會用到它。html

第二步:使用命令行

也許如今你還不是很瞭解什麼是命令行——OSX中的終端(Terminal),windows中的命令提示符(Command Prompt),但很快你就會知道。它看起來沒那麼簡單,但一旦掌握了它的竅門,就能夠很方便的執行不少命令行程序,好比Sass,Yeoman和Git等,這些都是很是有用的工具。前端

若是你很熟悉命令行,直接跳到步驟四。node

爲了確保Node已經正確安裝,咱們執行幾個簡單的命令。git

node -v

回車(Enter),若是正確安裝的話,你會看到所安裝的Node的版本號,接下來看看npm。github

npm -v

這一樣能獲得npm的版本號。npm

若是這兩行命令沒有獲得返回,可能node就沒有安裝正確,嘗試重啓下命令行工具,若是還不行的話,只能回到第一步進行重裝。編程

第三步:定位到項目

如今,咱們已經大體瞭解了命令行而且知道如何簡單使用它,接下來只須要兩個簡單的命令就能定位到文件目錄並看看目錄裏都有些什麼文件。json

  • cd定位到目錄gulp

  • ls列出文件列表

建議多敲敲這兩個命令,瞭解文件系統並知道文件都在哪裏。

習慣使用了這兩個命令後,就要進入咱們的項目目錄,這個目錄各不相同,舉個例子,這是我進入我項目目錄的命令:

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

成功進入項目目錄後,咱們開始安裝gulp。

第四步:安裝gulp

咱們已經知道如何使用命令行,如今嘗試點新的東西,認識npm而後安裝gulp。

在命令行中輸入

sudo npm install -g gulp
  1. sudo是以管理員身份執行命令,通常會要求輸入電腦密碼;

  2. npm是安裝node模塊的工具,執行install命令;

  3. -g表示在全局環境安裝,以便任何項目都能使用它;

  4. 最後,gulp是將要安裝的node模塊的名字。

運行時注意查看命令行有沒有錯誤信息,安裝完成後,你可使用下面的命令查看gulp的版本號以確保gulp已經被正確安裝。

gulp -v

接下來,咱們須要將gulp安裝到項目本地

npm install —-save-dev gulp

這裏,咱們使用—-save-dev來更新package.json文件,更新devDependencies值,以代表項目須要依賴gulp。

Dependencies能夠向其餘參與項目的人指明項目在開發環境和生產環境中的node模塊依懶關係,想要更加深刻的瞭解它能夠看看package.json文檔。

第五步:新建Gulpfile文件,運行gulp

安裝好gulp後咱們須要告訴它要爲咱們執行哪些任務,首先,咱們本身須要弄清楚項目須要哪些任務。這裏舉例出幾個很經常使用的功能。

  • 檢查js 這裏使用的是gulp-jshint模塊來完成這項功能;

  • 編譯sass sass是一種css預處理語言,它彌補了css自己沒法完成像其它編程語言同樣的嵌套、繼承、設置變量等工做。這裏使用gulp-compass模塊來完成這項功能。使用gulp-compass須要先安裝compass,由於這篇文章的主角是gulp,因此暫且不對compass作過多說明了。若是想知道copmass安裝方法能夠先自行百度,之後呢,我也會出有關compass方面的文章,敬請期待咯~

  • 合併js 這裏使用gulp-concat模塊來完成這項功能;

  • 壓縮並重命名合併後的js 這裏使用gulp-uglify模塊和gulp-rename模塊配合來完成這項任務。

安裝依賴

npm install gulp-jshint gulp-compass gulp-concat gulp-uglify gulp-rename --save-dev

提醒下,若是以上命令提示權限錯誤,須要添加sudo再次嘗試。

新建gulpfile文件

如今,組件都安裝完畢,咱們須要新建gulpfile文件以指定gulp須要爲咱們完成什麼任務。

gulp只有五個方法: taskrunwatchsrc,和dest,在項目根目錄新建一個js文件並命名爲gulpfile.js。我按照代碼書寫順序貼上代碼並依次講解,你們把每一塊代碼拼接在一塊兒就是完整文件了。多感人啊~多麼有節操呀~你們用起來一點不打麻煩~

引入模塊

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    compass = require('gulp-compass'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename');

這一步,咱們引入了核心的gulp和其餘依賴組件,接下來,分開建立lint, sass, scripts 和 default這四個不一樣的任務。

Lint任務

gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

Link任務會檢查js/目錄下得js文件有沒有報錯或警告。

Compass任務

gulp.task('compass', function() {
    gulp.src(['scss/**/**/*.scss','!scss/lib/*.scss'])
        .pipe(compass({
            config_file: './config.rb',
            css: 'css',
            sass: 'scss',
            comments: true
        }))
        .pipe(gulp.dest('css'));
});

Compass任務會編譯scss/目錄下二級文件夾內的scss文件,並把編譯完成的css文件保存到/css目錄中。這裏我屏蔽了scss/lib/目錄,主要由於個人習慣是把reset文件或者base文件寫在lib目錄下,而這些文件通常都是被非公用的scss文件引入來使用的,不多單獨在頁面內引入,因此就不特地編譯了。

Compass配置

這裏我要着重說明一下gulp-compass中的幾個相當重要的配置項。

comments
默認:false
描述:是否顯示註釋。

css
默認:css
描述:指定輸出的css文件目錄。

sass
默認:sass
描述:指定待編譯的scss文件目錄。

css sass配置內容必需要和config.rb文件中的css sass項配置內容相同,不然沒法完成編譯。這件事情灰常重要,請自行在心中默唸三遍。

Watch任務

主要的做用是檢測scss/目錄下有沒有文件更改,若是有的話,運行compass任務來對sass文件進行編譯。

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

Scripts 任務

gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

scripts任務會合並js/目錄下得全部得js文件並輸出到dist/目錄,而後gulp會重命名、壓縮合並的文件,也輸出到dist/目錄。

default任務

gulp.task('default', function(){
    gulp.run('lint', 'compass', 'scripts');
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

這時,咱們建立了一個基於其餘任務的default任務。使用.run()方法關聯和運行咱們上面定義的任務,使用.watch()方法去監聽指定目錄的文件變化,當有文件變化時,會運行回調定義的其餘任務。

如今,回到命令行,能夠直接運行gulp任務了。

gulp

這將執行定義的default任務,換言之,這和如下的命令式同一個意思

gulp default

固然,咱們能夠運行在gulpfile.js中定義的任意任務,好比,如今運行sass任務:

gulp compass

結束語

如今已經作到了設置gulp任務而後運行他們,如今再回顧下以前學習的。

  1. 學習了安裝Node環境

  2. 學習了簡單使用命令行

  3. 學習了用命令行進入項目目錄

  4. 學習了使用npm和安裝gulp

  5. 學習瞭如何運行gulp任務

另外,有一些參考資源供進一步學習:

  1. npm上得gulp組件

  2. gulp的Github主頁

  3. 官方package.json文檔

本文改編自老婆婆的文章《前端構建工具gulp入門教程》


  1. npm是基於命令行的node包管理工具,它能夠將node的程序模塊安裝到項目中,在npm官網中能夠查看和搜索全部可用的程序模塊。拽拽的npm管理着衆多的基於node的前端工具,包括我們此次的主角gulp。若是想查詢gulp各類模塊的api,只要經過這個網站搜索就好啦,簡直便利到爆,誰用誰知道。
相關文章
相關標籤/搜索