gulp安裝並使用

這幾天去面試,常常被問到如何管理前端項目代碼的問題(目前用的是rails),後來去了解了一下,有一個叫gulp的前端自動化構建工具,就決定學習一下。css

網上找了好多參考資料,如今整理一遍。html

一. 安裝前端

 先全局安裝node

 npm install --global gulp // 有時候須要sudo npm install --global gulpgit

   到項目所在文件夾github

   npm install --save-dev gulp  //  做爲項目的開發依賴安裝,安裝完後會出現一個node_modules文件夾面試

   此時,若是輸入gulp,會出現以下提示:npm

 No gulpfile foundjson

   因此須要在項目的跟目錄新建一個gulpfile.js的文件gulp

 文件內容: (關於這一部分,等會兒再說)

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

  gulp.task('default', function() {   // 設置默認任務

    // 將你的默認的任務代碼放在這

  });   

    再執行gulp命令,會出現以下提示: 

  [09:51:56] Using gulpfile ~/work/demos/todoapp/gulpfile.js
  [09:51:56] Starting 'default'...
  [09:51:56] Finished 'default' after 89 μs

 證實gulp已經安裝完成,而且能夠執行default方法了。

 可是到這裏還遠遠不夠,咱們須要繼續建立幾個文件夾和文件。

    先在根目錄下建立兩個文件夾:

        src(用於存放項目的html,css,js)和build(用於存放編譯壓縮過的html,css,js)

        再在這兩個文件夾中分別建立stylesscripts文件夾,在src中建立一個index.html文件

    如今執行npm init // 建立一個 package.json 文件,便於與開發團隊其餘成員分享當前環境信息

 

二. API

    須要瞭解的就4個API,gulp.src(),gulp.dest(),gulp.task(),以及gulp.watch()。能夠參考文檔

    1. gulp.src(globs[, options])

  gulp.src("src/scripts/*.js")    //獲取到src/scripts文件夾下的全部js文件流

    .pipe(gulp.dest("build/scripts"));   // 寫入到目標文件夾build/scripts中,注意這裏只能是文件夾的名稱

       globs參數: // 文件匹配模式,相似正則

  類型: String or Array

     這個能夠參考node-glob       

    2. gulp.dest(path[, options])

  path :  寫入文件的路徑 // 只能是文件夾的名稱,若是目標文件夾不存在,會自動建立  

    3. gulp.task(name[, deps, fn])

  name: 任務名

  deps:任務開始前須要被執行或完成(依賴)的任務,類型:array 

  gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {      });

這裏須要注意的是,若是依賴的任務是異步執行的,就須要手動作一些處理: 執行回調、返回promise或返回一個事件流。這些連接的文檔中都有,用到的話,能夠參看文檔。

 fn: task中須要執行的代碼

    4. gulp.watch(glob[, opts], tasks) 或 gulp.watch(glob[, opts, cb])

  gulp.watch(glob[, opts], tasks) 

  tasks: 類型 Array

  當監視的文件改變時,會執行tasks裏面的task

       gulp.watch("src/*.html", ["reload", "uglify"]);

  gulp.task("reload", function(){

    // reload

  });

  gulp.task("uglify", function(){

    // gulify

  });

  gulp.watch(glob[, opts, cb])

   gulp.watch("src/*.html", function(event){

    console.log("File" + event.path + "was" + event.type + ", running tasks...");  

  });  

  每次監視的文件改變,都會執行回調函數。

  cb回調函數會傳入一個event對象,描述文件的變化。

  event.type : added, deleted, changed

  event.path: 觸發事件的文件路徑

  好了,API部分就很少講了,網上有不少相關的講解,講得很細緻,我就不贅述了。

 

三. 插件

  插件很是多,能夠參考文檔

  安裝方法和使用方法,文檔中也都有

 

四. 構建任務

   瞭解了上面的基礎以後,我最關心的就是如何構建一個server,監聽工做目錄,當目錄中有文件改變時,就自動從新加載頁面。

  首先,要安裝這個插件 browser-sync 

  BrowserSync能夠同時同步刷新多個瀏覽器,更神奇的是你在一個瀏覽器中滾動頁面、點擊按鈕、輸入框中輸入信息等用戶行爲也會同步到每一個瀏覽器中。

  npm install gulp-browser-sync --save-dev

  gulpfile.js中:

  var browserSync = require('browser-sync');

 

  gulp.task('serve', function() {
    browserSync.init({
      server: './src/',  // 解析src下的html

      port: 3000
    });

 

    gulp.watch("src/*.html").on("change",browserSync.reload);
  });

  

  gulp.task('default', ['serve'], function() {
    
  });

 

  這個我也找了相關博客,能夠參考        

  命令行輸入gulp,就會自動打開瀏覽器,而且默認地址爲:http://localhost:3000

  如今,咱們能夠裝一些須要的插件,寫入相關gulp.task(),來管理咱們的項目了。

 

  ps:若是有理解的不對的地方,歡迎指正,謝謝!

相關文章
相關標籤/搜索