程式設計雜筆

[程設雜筆] 設定ReactJS + Gulp

終於把事情弄到一個段落了,來寫一篇集合最近研究東西的文章——ReactJS + Gulp。

Gulp簡單來說,就是個自動化任務的工具。比如說開發網頁的時候,想要在儲存檔案時自動重整網頁,那就設定好,讓Gulp幫你執行;想要把css、js檔都minify,寫好讓Gulp幫你執行;想要……,只要找到適當的模組,Gulp都可以幫你執行。

會看上Gulp這個東西,是因為有project的架構寫的太爛,想要用ReactJS+目前最新的ES6來重寫,無意間發現的。這篇文章有介紹ES6+ReactJS+Gulp,個人覺得非常實用,設定流程照這篇走。此外,我也發現另外一篇中文的教程,個人覺得也蠻不錯的,可以參考。如果不知道可以設定什麼模組的,也不知道怎麼寫的話,可以參考這篇英文的範例。

接著講解一下設定的過程在做什麼事。

安裝gulp

npm install --g gulp

接著,在想要應用gulp的project資料夾處輸入

npm init

package.json這個檔案就會產生,裡面會有一些設定的資訊包括git,author……,現在不設定也沒關係︳也可以日後再更改沒關係。接著

npm install --save react@0.14.x

這行做的事就是在node_modules資料夾下安裝我們的react模組。–save的意思就是同時更改package.json裡的設定。此外,也可以加上-g,安裝到global。最後,

npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react

把剩下的模組都補齊,同樣的,也可以裝到global。不過,建議是裝到local就好啦,具體原因,這篇有解釋。

下面簡單介紹一下,Gulpfile.js的語法,基本上它還是用js的語法在做設定。以下是我簡單的gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var browserSync=require('browser-sync');
gulp.task('build', function () {
    return browserify({entries: 'app.jsx', extensions: ['.jsx'], debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('../dist'))
        .pipe(browserSync.stream());
})
.task('watch', ['build'], function () {
    gulp.watch(['*.jsx','*.js','../css/*.css','../*.html'], ['build',browserSync.reload]);
})
.task('server', function() {
    browserSync.init({
        server: {
            baseDir: '..' 
        }
    });
})
.task('default',['server','watch']);

上面require的部分,就是用browserify來把我們要的模組弄進來。browserify是javascript模組化的工具,而transform的部分,是利用babel compiler,編譯我們很多的js jsx檔,甚至變成同一個檔案。這是變成bundle.js,放在dist資料夾下。最後browserSync.stream()則是代表和瀏覽器同步的意思。

這行代表如果有這類型的檔案更改並儲存,那就執行重建和重新讀入檔案到瀏覽器的工作。如此一來,我們可以同步更新我們的網頁,就不用再按重新整理了。

gulp.watch(['*.jsx','*.js','../css/*.css','../*.html'], ['build',browserSync.reload]);

很多的.task代表的是排任務的意思,每一個任務都用一個string代稱,其中default代表我們只要在command line輸入

gulp

就可以開始gulp的自動化處理。如果default換成serve的話,理所當然就是輸入

gulp serve

即可。

開gulp後,我們就可以把它放著,專心寫我們的程式碼,享受Gulp為我們服務的快感囉。

gulp+react+vim+tmux
gulp+react+vim+tmux

不要忘了,index.html裡面一定要加上下面這一行,不然沒有辦法使用我們的js程式碼。

<script src="dist/bundle.js"></script>

小記一下ES6的import export語法:

import React from 'react'

代表我們把 react 這個node_module,import進來,這樣程式碼裡就可以使用這個library,詳見此處。一般來說,我們還會再import個react-dom,這是ReactJS近來新增的library,把一部分的程式碼從react這個module裡獨立出來。

export default HelloWorld

代表我們export 這個 module,讓其它檔案可以使用這個檔案的程式碼,詳見此處

有一點需要注意的是,ES6有一些語法,browser還沒支援,所以用的時候要小心,不然就是要用其它transform的工具,轉換ES6的code。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s