流行得前端構建工具比較,以及gulp配置

前端如今三足鼎立的構建工具(不算比較老的ant,yeoman),非fis,grunt,gulp莫屬了。css

fis用起來最簡單,我打算本身得項目中使用一下fis.html

先說一下gulp安裝吧。前端

第一步:安裝node和npm,搭建node環境。node

訪問 http://nodejs.org。npm會隨着安裝包一塊兒安裝。程序員

確保node 和npm安裝,若是以下兩個命令行沒有正確安裝得話,說明node沒有安裝正確。npm

$ node -v
  v0.12.6

$ npm -v
  2.11.2

第二步:安裝gulpjson

認識npm:NPM是基於命令行的node包管理工具,它能夠將node的程序模塊安裝到項目中,在它的 官網 中能夠查看和搜索全部可用的程序模塊。gulp

sudo npm install -g gulp 
  1. sudo是以管理員身份執行命令,通常會要求輸入電腦密碼
  2. npm是安裝node模塊的工具,執行install命令segmentfault

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

  4. 最後,gulp是將要安裝的node模塊的名字
  5. 完成後,在終端(Terminal)輸入命令行,查看gulp有沒有安裝成功
    yangh1deMac-mini:static_global yangh1$ gulp -v
    CLI version 3.9.0Local version 3.9.0
  6. 咱們須要將gulp安裝到項目本地
  • npm install —-save-dev gulp

    這裏,咱們使用 —-save-dev 來更新package.json文件,更新devDependencies 值,以代表項目須要依賴gulp。Dependencies 能夠向其餘參與項目的人指明項目在開發環境和生產環境中的node模塊依懶關係,想要更加深刻的瞭解它能夠看看 package.json文檔 。

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

安裝好gulp後咱們須要告訴它要爲咱們執行哪些任務,首先,咱們本身須要弄清楚項目須要哪些任務。

  • 檢查Javascript
  • 編譯Sass(或Less之類的)文件
  • 合併Javascript
  • 壓縮並重命名合併後的Javascript

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

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

新建gulpfile文件

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

gulp只有五個方法: task , run , watch , src ,和 dest ,在項目根目錄新建一個js文件並命名爲 gulpfile.js ,把下面的代碼粘貼進去://// 引入 gulp

var gulp = require('gulp'); // 引入組件
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');

// 檢查腳本 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.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')); }); // 默認任務 gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 監聽文件變化 gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); });

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

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

3.sass任務:Sass任務會編譯 scss/ 目錄下的scss文件,並把編譯完成的css文件保存到/css 目錄中。

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

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

多看一些

gulp和grunt比較不錯得文章:http://www.jianshu.com/p/3779f708f5d7/  我以爲寫得比較清晰。

                                          https://segmentfault.com/a/1190000002491282

                                          http://www.ydcss.com/archives/18     目前發現寫得最簡單清晰gulp入門教程

Gruntfile維護起來那麼困難,有幾個緣由:

  • 配置和運行分離
    程序員都知道,變量的聲明和使用挨在一塊兒,最方便理解和修改。但Gruntfile裏,配置Task和調用它們的地方離得很遠,極大地增長了心智負擔。

  • 每一個插件作的事太多
    每一個Task的結果必須寫到磁盤文件,另外一個Task再讀,損害性能卻是小事,更麻煩的是讓整個過程變複雜了。
    就像一個個小做坊,來料加工又返回給客戶,這中間的溝通成本、出錯機會都大大增長。

  • 配置項過多
    作事多了,配置項天然也多。至少輸入和輸出的位置得配吧。每一個插件的配置規則還不盡相同。用每一個插件,都得去學習一番。

    

Gulp是怎麼解決的:

  • 配置和運行分離
    code over configuration,直接就在調用的地方配置。

  • 每一個插件作的事太多
    單一職責,依靠組合來發揮做用。就像一條自動化生產線,上一道工序的產出直接交給下一步,效率不要過高。

  • 配置項過多既然你們都遵循同一個協議,不少配置就不須要了。

相關文章
相關標籤/搜索