Balthild

Make an orange dream.

  • 首页
  • 关于
  • 作品
  • 留言板

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

发表于 2016-09-07 | 分类于 设计/代码 | 2 条评论

JavaScript
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"]);

 

今夜,我们都是氪金玩家
一个基于 Vue.js 和 Firebase 的纯前端单页博客程序

2 条评论

  1. Pingback: Laravel Mix – 优雅的前端构建脚手架 – Balthild
  2. Archeb说道:
    2017-12-09 21:46

    我曾经尝试过这么干
    直到后面我摔断了腿
    才意识到主题这东西
    还是犯不着用脚手架

    回复

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注

轻歌

轻歌

65 日志
5 分类
0 标签
RSS

分类目录

  • 无聊/折腾
  • 未分类
  • 生活/记录
  • 简言/随笔
  • 设计/代码

书签

  • Alien's Blog
  • Andy1999
  • Awoer's Blog
  • Cyberiad
  • DIYgod
  • Everttylestevan
  • Kenvix's Blog
  • MoeNet Inc.
  • NetherCrowCSOLYOO
  • 吟梦酱の日记
  • 小羊儿的心情天空

功能

  • 登录
  • 文章RSS
  • 评论RSS
  • WordPress.org

AdSense

2019 Balthild
Proudly powered by WordPress
A fork of NexT.Pisces