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

餘二五發表於2017-11-15
前端

以下是gulpfile.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var gulp = require(`gulp`),
    config = require(`./config`),
    cleanCss = require(`gulp-clean-css`),
    jshint = require(`gulp-jshint`),
    uglify = require(`gulp-uglify`),
    rename = require(`gulp-rename`),
    concat = require(`gulp-concat`),
    browserify = require(`gulp-browserify`),
    nodemon = require(`gulp-nodemon`),
    sourcemaps = require(`gulp-sourcemaps`),
    del = require(`del`),
    sass = require(`gulp-sass`),
    replace = require(`gulp-replace`),
    browserSync = require(`browser-sync`).create();
 
gulp.task(`sass`, function () {
    return gulp.src(`client/sass/main.scss`)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(`client/sass/sass2css`))
        .pipe(rename({suffix: `.min`}))
        .pipe(cleanCss())
        .pipe(gulp.dest(`client/css/export`))
        .pipe(browserSync.reload({stream: true}));
});
 
gulp.task(`clean`, function (callback) {
    del([`client/css/export/*.min.css`], callback);
});
 
gulp.task(`watch`, function () {
    browserSync.init({
        proxy: `localhost:` + config.listenPort
    });
 
    gulp.watch(`client/sass/main.scss`, [`sass`]);
    gulp.watch(`views/pages/*.jade`, browserSync.reload);
});
 
gulp.task(`serve`, function () {
    return nodemon({
        script: `app.js`,
        ignore: [
            "client/**",
            "views/**"
        ]
    });
});
 
gulp.task(`develop`, [`watch`, `serve`]);

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

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


相關文章