Gulp+browser-sync打造前端開發自動重新整理

以下是gulpfile.js:

<code>var</code> <code>gulp = require(</code><code>'gulp'</code><code>),</code>

<code>    </code><code>config = require(</code><code>'./config'</code><code>),</code>

<code>    </code><code>cleanCss = require(</code><code>'gulp-clean-css'</code><code>),</code>

<code>    </code><code>jshint = require(</code><code>'gulp-jshint'</code><code>),</code>

<code>    </code><code>uglify = require(</code><code>'gulp-uglify'</code><code>),</code>

<code>    </code><code>rename = require(</code><code>'gulp-rename'</code><code>),</code>

<code>    </code><code>concat = require(</code><code>'gulp-concat'</code><code>),</code>

<code>    </code><code>browserify = require(</code><code>'gulp-browserify'</code><code>),</code>

<code>    </code><code>nodemon = require(</code><code>'gulp-nodemon'</code><code>),</code>

<code>    </code><code>sourcemaps = require(</code><code>'gulp-sourcemaps'</code><code>),</code>

<code>    </code><code>del = require(</code><code>'del'</code><code>),</code>

<code>    </code><code>sass = require(</code><code>'gulp-sass'</code><code>),</code>

<code>    </code><code>replace = require(</code><code>'gulp-replace'</code><code>),</code>

<code>    </code><code>browserSync = require(</code><code>'browser-sync'</code><code>).create();</code>

<code>gulp.task(</code><code>'sass'</code><code>, </code><code>function</code> <code>() {</code>

<code>    </code><code>return</code> <code>gulp.src(</code><code>'client/sass/main.scss'</code><code>)</code>

<code>        </code><code>.pipe(sourcemaps.init())</code>

<code>        </code><code>.pipe(sass())</code>

<code>        </code><code>.pipe(sourcemaps.write())</code>

<code>        </code><code>.pipe(gulp.dest(</code><code>'client/sass/sass2css'</code><code>))</code>

<code>        </code><code>.pipe(rename({suffix: </code><code>'.min'</code><code>}))</code>

<code>        </code><code>.pipe(cleanCss())</code>

<code>        </code><code>.pipe(gulp.dest(</code><code>'client/css/export'</code><code>))</code>

<code>        </code><code>.pipe(browserSync.reload({stream: </code><code>true</code><code>}));</code>

<code>});</code>

<code>gulp.task(</code><code>'clean'</code><code>, </code><code>function</code> <code>(callback) {</code>

<code>    </code><code>del([</code><code>'client/css/export/*.min.css'</code><code>], callback);</code>

<code>gulp.task(</code><code>'watch'</code><code>, </code><code>function</code> <code>() {</code>

<code>    </code><code>browserSync.init({</code>

<code>        </code><code>proxy: </code><code>'localhost:'</code> <code>+ config.listenPort</code>

<code>    </code><code>});</code>

<code>    </code><code>gulp.watch(</code><code>'client/sass/main.scss'</code><code>, [</code><code>'sass'</code><code>]);</code>

<code>    </code><code>gulp.watch(</code><code>'views/pages/*.jade'</code><code>, browserSync.reload);</code>

<code>gulp.task(</code><code>'serve'</code><code>, </code><code>function</code> <code>() {</code>

<code>    </code><code>return</code> <code>nodemon({</code>

<code>        </code><code>script: </code><code>'app.js'</code><code>,</code>

<code>        </code><code>ignore: [</code>

<code>            </code><code>"client/**"</code><code>,</code>

<code>            </code><code>"views/**"</code>

<code>        </code><code>]</code>

<code>gulp.task(</code><code>'develop'</code><code>, [</code><code>'watch'</code><code>, </code><code>'serve'</code><code>]);</code>

有了這個，開發就很有樂趣了。參考：http://www.browsersync.cn/docs/gulp/

本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1841653，如需轉載請自行聯系原作者