gulp + browserify + babel + sass 前端脚手架初尝试

JavaScript

var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var cleancss = require('gulp-clean-css'); var jshint = require('gulp-jshint'); var babelify = require('babelify'); var browserify = require('browserify'); var uglify = require('gulp-uglify'); var filter = require('gulp-filter'); var sourcemaps = require('gulp-sourcemaps'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); gulp.task('lint', function() { gulp.src('src/es6/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); gulp.task("es6", function() { var filterJs = filter(['*.js', '!*.map'], { restore: true }); browserify({ entries: 'src/es6/app.js', debug: true }) .transform(babelify, { presets: ["es2015"] }) .bundle() .pipe(source('dist.js')) .pipe(buffer()) .pipe(filterJs) .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(filterJs.restore) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./js')); }); gulp.task('sass', function() { gulp.src('src/scss/app.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(autoprefixer()) .pipe(cleancss()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./css')) }); gulp.task("watch", function(){ gulp.watch('src/es6/*.js', ['lint', 'es6']); gulp.watch('src/scss/*.scss', ['sass']); }); gulp.task("build", ["lint", "es6", "sass"]); gulp.task("default", ["build", "watch"]);

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 52 53 54 55 56 57 58 59 60 61 62 63 64 65

var gulp = require('gulp');   var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var cleancss = require('gulp-clean-css');   var jshint = require('gulp-jshint');   var babelify = require('babelify'); var browserify = require('browserify'); var uglify = require('gulp-uglify'); var filter = require('gulp-filter');   var sourcemaps = require('gulp-sourcemaps'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer');   gulp.task('lint', function() {     gulp.src('src/es6/*.js')         .pipe(jshint())         .pipe(jshint.reporter('default')); });   gulp.task("es6", function() {     var filterJs = filter(['*.js', '!*.map'], {         restore: true     });       browserify({         entries: 'src/es6/app.js',         debug: true     })         .transform(babelify, {             presets: ["es2015"]         })         .bundle()           .pipe(source('dist.js'))         .pipe(buffer())         .pipe(filterJs)         .pipe(sourcemaps.init())         .pipe(uglify())         .pipe(filterJs.restore)         .pipe(sourcemaps.write('.'))         .pipe(gulp.dest('./js')); });   gulp.task('sass', function() {     gulp.src('src/scss/app.scss')         .pipe(sourcemaps.init())         .pipe(sass().on('error', sass.logError))         .pipe(autoprefixer())         .pipe(cleancss())         .pipe(sourcemaps.write('.'))         .pipe(gulp.dest('./css')) });   gulp.task("watch", function(){     gulp.watch('src/es6/*.js', ['lint', 'es6']);     gulp.watch('src/scss/*.scss', ['sass']); });   gulp.task("build", ["lint", "es6", "sass"]);   gulp.task("default", ["build", "watch"]);