Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015"]
}
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "sample-ui-react",
"version": "0.1.5",
"version": "0.2.0",
"main": "main.js",
"dependencies": {
"lodash": "~3.10.1",
"moment": "~2.10.6",
"bootstrap-sass-official": "~3.3.6",
"fontawesome": "~4.5.0",
"react": "~0.14.6",
"react": "~0.14.7",
"react-router": "~0.13.5",
"eventEmitter": "~4.3.0",
"flux": "~2.1.1"
Expand Down
196 changes: 196 additions & 0 deletions gulpfile.babel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
const root = {
src: `${__dirname}/source`,
dist: `${__dirname}/public`,
tmp: `${__dirname}/tmp`
}

const paths = {
src: {
root: `${root.src}`,
html: `${root.src}/html`,
js: `${root.src}/js`,
css: `${root.src}/css`,
static: `${root.src}/static`
},
dist: {
root: `${root.dist}`,
js: `${root.dist}/js`,
css: `${root.dist}/css`,
font: `${root.dist}/fonts`
},
bower: {
component: `${__dirname}/bower_components`,
file: `${__dirname}/bower.json`
}
}
const resource = {
src: {
jade: `${paths.src.html}/**/*.jade`,
webpack: {
babel: `${paths.src.js}/**/*.js`,
vue: `${paths.src.js}/**/*.vue`
},
sass: `${paths.src.css}/**/*.s+(a|c)ss`,
static: `${paths.src.static}/**/*`,
font: `${paths.bower.component}/fontawesome/fonts/**/*`
}
}

import gulp from 'gulp'
import gulpLoaderPlugins from 'gulp-load-plugins'
import del from 'del'
import path from 'path'
import bower from 'bower'
import bowerFiles from 'main-bower-files'
import webpack from 'webpack'
import webpackStream from 'webpack-stream'
import runSequence from 'run-sequence'
import browserSyncTool from 'browser-sync'
import RevAll from 'gulp-rev-all'

const $ = gulpLoaderPlugins()
const browserSync = browserSyncTool.create()

let production = false

// build and watch for developer
gulp.task('default', ['build', 'server'])

//## build for developer
gulp.task('build', (callback) =>
runSequence('clean', 'bower', ['build:jade', 'build:sass', 'build:webpack', 'build:static'], callback)
)

//## build production
gulp.task('build-prod', (callback) =>
runSequence('production', 'build', 'revision', callback)
)

// clean dist
gulp.task('clean', () =>
del.sync([`${paths.dist.root}/*`, `!${paths.dist.root}/.git*`], { force: true })
)

// production option
gulp.task('production', () => production = true )

// support Resource Revision
gulp.task('revision', (callback) =>
runSequence('revision:clean', 'revision:append', 'clean', 'revision:copy', 'revision:clean', callback)
)

// build Vendor UI Library (bower.json) [Load/Concat]
gulp.task('bower', () => {
bower.commands.install().on('end', () => {
const filterCss = ['**/bootstrap-datepicker3.css']
gulp.src(bowerFiles({filter: filterCss}))
.pipe($.concat('vendor.css'))
.pipe($.pleeease())
.pipe(gulp.dest(paths.dist.css))
gulp.src(resource.src.font) // for font-awesome
.pipe(gulp.dest(paths.dist.font))
const filterJs = (file) => { // for bootstrap-sass-official
return /.*\.js/.test(file) && ($.slash(file).indexOf('/bootstrap/') == -1)
}
const appendJs = path.join(paths.bower.component, 'react/react-dom.js')
gulp.src(bowerFiles({filter: filterJs}).concat(appendJs))
.pipe($.concat('vendor.js'))
.pipe($.if(production, $.uglify()))
.pipe(gulp.dest(paths.dist.js))
})
})

// compile Webpack [ ES6(Babel) / Vue -> SPA(main.js) ]
gulp.task('build:webpack', () => {
process.env.NODE_ENV = (production == true) ? 'production' : 'development'
let plugins = [
new webpack.ResolverPlugin(new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])),
new webpack.optimize.DedupePlugin()
]
if (production) plugins.push(new webpack.optimize.UglifyJsPlugin({compress: { warnings: false }}))
gulp.src([resource.src.webpack.babel, resource.src.webpack.vue])
.pipe($.plumber())
.pipe(webpackStream({
entry: `${paths.src.js}/main.js`,
output: {filename: 'bundler.js'},
watch: !production,
module: {
loaders: [
{test: /\.(js|jsx)$/, loader: 'babel', query: {presets: ['es2015', 'react']}},
{test: /\.jade$/, loader: "react-jade-loader"}
]
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components', paths.src.js],
extensions: ['', '.js', ".jsx", ".jade"]
},
resolveLoader: {
modulesDirectories: ['node_modules', `${__dirname}/webpack/loaders`]
},
plugins: plugins
}, webpack))
.pipe(gulp.dest(paths.dist.js))
.pipe(browserSync.stream())
})

// compile Jade -> HTML
gulp.task('build:jade', () => {
gulp.src(resource.src.jade)
.pipe($.plumber())
.pipe($.jade())
.pipe($.htmlhint())
.pipe($.htmlhint.reporter())
.pipe(gulp.dest(paths.dist.root))
.pipe(browserSync.stream())
})

// compile Sass -> CSS
// check https://github.com/sasstools/sass-lint/pull/168
gulp.task('build:sass', () => {
gulp.src(resource.src.sass)
.pipe($.plumber())
// .pipe($.sassLint())
// .pipe($.sassLint.format())
// .pipe($.sassLint.failOnError())
.pipe($.sass())
.pipe($.concat('style.css'))
.pipe($.pleeease())
.pipe(gulp.dest(paths.dist.css))
.pipe(browserSync.stream())
})

// copy Static Resource
gulp.task('build:static', () => {
gulp.src(resource.src.static)
.pipe(gulp.dest(paths.dist.root))
})

// run Development Web Server (BrowserSync) [localhost:3000]
gulp.task('server', () => {
browserSync.init({
server: {baseDir: paths.dist.root},
notify: false
})
// watch for source
gulp.watch(paths.bower.file, ['bower'])
gulp.watch(resource.src.jade, ['build:jade'])
gulp.watch(resource.src.sass, ['build:sass'])
gulp.watch(resource.src.static, ['build:static'])
})

// append Resource Revision
gulp.task('revision:clean', () => {
del.sync([root.tmp], { force: true })
})

gulp.task('revision:append', () => {
let revAll = new RevAll({dontRenameFile: [/^\/favicon.ico$/g, '.html']})
gulp.src(`${paths.dist.root}/**/*`)
.pipe(revAll.revision())
.pipe(gulp.dest(root.tmp))
})

gulp.task('revision:copy', () => {
gulp.src(`${root.tmp}/**/*`)
.pipe(gulp.dest(paths.dist.root))
})
171 changes: 0 additions & 171 deletions gulpfile.coffee

This file was deleted.

Loading