gulp 模板

[tiancheng91]

废弃, 最新的见 https://github.com/tiancheng91/webapp-starter-kit // gulp + browsersync + browserify + scss + pug

// gulp
var gulp = require('gulp');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var rename = require("gulp-rename");
var autoprefixer = require('gulp-autoprefixer');

// browserify
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

// browserSync
var browserSync = require('browser-sync').create()
var reload = browserSync.reload;

// 配置
var src = {
    scss: 'src/scss/*.scss',
    html: 'src/*.html',
    js: 'src/js/index.js'
};

// proxy local
gulp.task('proxy', ['sass'], function () {
    browserSync.init({
        proxy: 'http://localhost:5000',
        // server: true,       // 提供静态文件
        // files: ['*.css']         // 监控变化自动reject, 这边注释掉, sass会主动通知
        // serveStatic: ["app/static"],
        // files: "app/static/_custom.css",
        // snippetOptions: {
        //     rule: {
        //         match: /<\/head>/i,
        //         fn: function (snippet, match) {
        //             return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
        //         }
        //     }
        // }
    })
});

// Static Server + watching files
gulp.task('serve', ['sass'], function () {
    browserSync.init({
        server: "./src"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.html).on('change', reload);
});

// Compile sass into CSS
gulp.task('sass', function () {
    return gulp.src(src.scss)
        .pipe(sass().on('error', sass.logError))
        // .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(concat('app.css'))
        // .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist'))
        .pipe(reload({
            stream: true
        }));
});

// bundle javascript
gulp.task('javascript', function () {
    return browserify({
            entries: src.js,
            debug: true
        })
        .on('error', function (err) {
            gutil.log(err.message);
            this.emit("end");
        })
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'))
        .pipe(reload());
});

gulp.task('watch', ['sass', 'build'], function () {
    gulp.watch(src.js, ['build']);
    gulp.watch(src.scss, ['scss']);
});

gulp.task('default', ['sass', 'javascript']);