build - refactor build task generators + add mascara to standard build phase
This commit is contained in:
parent
bdf99269e2
commit
4f915cf2d8
200
gulpfile.js
200
gulpfile.js
|
@ -32,6 +32,15 @@ var babel = require('gulp-babel')
|
||||||
var disableDebugTools = gutil.env.disableDebugTools
|
var disableDebugTools = gutil.env.disableDebugTools
|
||||||
var debug = gutil.env.debug
|
var debug = gutil.env.debug
|
||||||
|
|
||||||
|
const commonPlatforms = [
|
||||||
|
// browser extensions
|
||||||
|
'firefox',
|
||||||
|
'chrome',
|
||||||
|
'edge',
|
||||||
|
'opera',
|
||||||
|
// browser webapp
|
||||||
|
'mascara',
|
||||||
|
]
|
||||||
|
|
||||||
// browser reload
|
// browser reload
|
||||||
|
|
||||||
|
@ -46,58 +55,28 @@ gulp.task('dev:reload', function() {
|
||||||
|
|
||||||
gulp.task('copy:locales', copyTask({
|
gulp.task('copy:locales', copyTask({
|
||||||
source: './app/_locales/',
|
source: './app/_locales/',
|
||||||
destinations: [
|
destinations: commonPlatforms.map(platform => `./dist/${platform}/_locales`),
|
||||||
'./dist/firefox/_locales',
|
|
||||||
'./dist/chrome/_locales',
|
|
||||||
'./dist/edge/_locales',
|
|
||||||
'./dist/opera/_locales',
|
|
||||||
]
|
|
||||||
}))
|
}))
|
||||||
gulp.task('copy:images', copyTask({
|
gulp.task('copy:images', copyTask({
|
||||||
source: './app/images/',
|
source: './app/images/',
|
||||||
destinations: [
|
destinations: commonPlatforms.map(platform => `./dist/${platform}/images`),
|
||||||
'./dist/firefox/images',
|
|
||||||
'./dist/chrome/images',
|
|
||||||
'./dist/edge/images',
|
|
||||||
'./dist/opera/images',
|
|
||||||
],
|
|
||||||
}))
|
}))
|
||||||
gulp.task('copy:contractImages', copyTask({
|
gulp.task('copy:contractImages', copyTask({
|
||||||
source: './node_modules/eth-contract-metadata/images/',
|
source: './node_modules/eth-contract-metadata/images/',
|
||||||
destinations: [
|
destinations: commonPlatforms.map(platform => `./dist/${platform}/images/contract`),
|
||||||
'./dist/firefox/images/contract',
|
|
||||||
'./dist/chrome/images/contract',
|
|
||||||
'./dist/edge/images/contract',
|
|
||||||
'./dist/opera/images/contract',
|
|
||||||
],
|
|
||||||
}))
|
}))
|
||||||
gulp.task('copy:fonts', copyTask({
|
gulp.task('copy:fonts', copyTask({
|
||||||
source: './app/fonts/',
|
source: './app/fonts/',
|
||||||
destinations: [
|
destinations: commonPlatforms.map(platform => `./dist/${platform}/fonts`),
|
||||||
'./dist/firefox/fonts',
|
|
||||||
'./dist/chrome/fonts',
|
|
||||||
'./dist/edge/fonts',
|
|
||||||
'./dist/opera/fonts',
|
|
||||||
],
|
|
||||||
}))
|
}))
|
||||||
gulp.task('copy:reload', copyTask({
|
gulp.task('copy:reload', copyTask({
|
||||||
source: './app/scripts/',
|
source: './app/scripts/',
|
||||||
destinations: [
|
destinations: commonPlatforms.map(platform => `./dist/${platform}/scripts`),
|
||||||
'./dist/firefox/scripts',
|
|
||||||
'./dist/chrome/scripts',
|
|
||||||
'./dist/edge/scripts',
|
|
||||||
'./dist/opera/scripts',
|
|
||||||
],
|
|
||||||
pattern: '/chromereload.js',
|
pattern: '/chromereload.js',
|
||||||
}))
|
}))
|
||||||
gulp.task('copy:root', copyTask({
|
gulp.task('copy:root', copyTask({
|
||||||
source: './app/',
|
source: './app/',
|
||||||
destinations: [
|
destinations: commonPlatforms.map(platform => `./dist/${platform}`),
|
||||||
'./dist/firefox',
|
|
||||||
'./dist/chrome',
|
|
||||||
'./dist/edge',
|
|
||||||
'./dist/opera',
|
|
||||||
],
|
|
||||||
pattern: '/*',
|
pattern: '/*',
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
@ -208,7 +187,7 @@ const jsFiles = [
|
||||||
'inpage',
|
'inpage',
|
||||||
'contentscript',
|
'contentscript',
|
||||||
'background',
|
'background',
|
||||||
'popup',
|
'ui',
|
||||||
]
|
]
|
||||||
|
|
||||||
// scss compilation and autoprefixing tasks
|
// scss compilation and autoprefixing tasks
|
||||||
|
@ -230,7 +209,7 @@ gulp.task('lint-scss', function() {
|
||||||
.src('ui/app/css/itcss/**/*.scss')
|
.src('ui/app/css/itcss/**/*.scss')
|
||||||
.pipe(gulpStylelint({
|
.pipe(gulpStylelint({
|
||||||
reporters: [
|
reporters: [
|
||||||
{formatter: 'string', console: true}
|
{ formatter: 'string', console: true }
|
||||||
],
|
],
|
||||||
fix: true,
|
fix: true,
|
||||||
}));
|
}));
|
||||||
|
@ -243,32 +222,51 @@ gulp.task('fmt-scss', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
// bundle tasks
|
// bundle tasks
|
||||||
|
createTasksForBuildJsExtension({ jsFiles, taskPrefix: 'dev:js', bundleTaskOpts: { isBuild: false } })
|
||||||
|
createTasksForBuildJsExtension({ jsFiles, taskPrefix: 'build:js:extension', bundleTaskOpts: { isBuild: true } })
|
||||||
|
createTasksForBuildJsMascara({ taskPrefix: 'build:js:mascara' })
|
||||||
|
|
||||||
var jsDevStrings = jsFiles.map(jsFile => `dev:js:${jsFile}`)
|
function createTasksForBuildJsExtension({ jsFiles, taskPrefix, bundleTaskOpts }) {
|
||||||
var jsBuildStrings = jsFiles.map(jsFile => `build:js:${jsFile}`)
|
// inpage must be built before all other scripts:
|
||||||
|
const rootDir = './app/scripts'
|
||||||
|
const nonInpageFiles = jsFiles.filter(file => file !== 'inpage')
|
||||||
|
const buildPhase1 = ['inpage']
|
||||||
|
const buildPhase2 = nonInpageFiles
|
||||||
|
const destinations = [
|
||||||
|
'./dist/firefox/scripts',
|
||||||
|
'./dist/chrome/scripts',
|
||||||
|
'./dist/edge/scripts',
|
||||||
|
'./dist/opera/scripts',
|
||||||
|
]
|
||||||
|
createTasksForBuildJs({ rootDir, jsFiles, taskPrefix, bundleTaskOpts, destinations, buildPhase1, buildPhase2 })
|
||||||
|
}
|
||||||
|
|
||||||
jsFiles.forEach((jsFile) => {
|
function createTasksForBuildJsMascara({ taskPrefix, bundleTaskOpts }) {
|
||||||
gulp.task(`dev:js:${jsFile}`, bundleTask({
|
// inpage must be built before all other scripts:
|
||||||
watch: true,
|
const rootDir = './mascara/src/'
|
||||||
label: jsFile,
|
const jsFiles = ['ui', 'proxy', 'background']
|
||||||
filename: `${jsFile}.js`,
|
const destinations = ['./dist/mascara/scripts']
|
||||||
isBuild: false
|
createTasksForBuildJs({ rootDir, jsFiles, taskPrefix, bundleTaskOpts, destinations, buildPhase1: jsFiles })
|
||||||
}))
|
}
|
||||||
gulp.task(`build:js:${jsFile}`, bundleTask({
|
|
||||||
watch: false,
|
|
||||||
label: jsFile,
|
|
||||||
filename: `${jsFile}.js`,
|
|
||||||
isBuild: true
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
|
|
||||||
// inpage must be built before all other scripts:
|
function createTasksForBuildJs({ rootDir, jsFiles, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) {
|
||||||
const firstDevString = jsDevStrings.shift()
|
// bundle task for each file
|
||||||
gulp.task('dev:js', gulp.series(firstDevString, gulp.parallel(...jsDevStrings)))
|
jsFiles.forEach((jsFile) => {
|
||||||
|
gulp.task(`${taskPrefix}:${jsFile}`, bundleTask(Object.assign({
|
||||||
|
watch: false,
|
||||||
|
label: jsFile,
|
||||||
|
filename: `${jsFile}.js`,
|
||||||
|
filepath: `${rootDir}/${jsFile}.js`,
|
||||||
|
destinations,
|
||||||
|
}, bundleTaskOpts)))
|
||||||
|
})
|
||||||
|
// compose into larger task
|
||||||
|
const subtasks = []
|
||||||
|
subtasks.push(gulp.parallel(buildPhase1.map(file => `${taskPrefix}:${file}`)))
|
||||||
|
if (buildPhase2.length) subtasks.push(gulp.parallel(buildPhase2.map(file => `${taskPrefix}:${file}`)))
|
||||||
|
|
||||||
// inpage must be built before all other scripts:
|
gulp.task(taskPrefix, gulp.series(subtasks))
|
||||||
const firstBuildString = jsBuildStrings.shift()
|
}
|
||||||
gulp.task('build:js', gulp.series(firstBuildString, gulp.parallel(...jsBuildStrings)))
|
|
||||||
|
|
||||||
// disc bundle analyzer tasks
|
// disc bundle analyzer tasks
|
||||||
|
|
||||||
|
@ -278,7 +276,6 @@ jsFiles.forEach((jsFile) => {
|
||||||
|
|
||||||
gulp.task('disc', gulp.parallel(jsFiles.map(jsFile => `disc:${jsFile}`)))
|
gulp.task('disc', gulp.parallel(jsFiles.map(jsFile => `disc:${jsFile}`)))
|
||||||
|
|
||||||
|
|
||||||
// clean dist
|
// clean dist
|
||||||
|
|
||||||
|
|
||||||
|
@ -295,16 +292,44 @@ gulp.task('zip', gulp.parallel('zip:chrome', 'zip:firefox', 'zip:edge', 'zip:ope
|
||||||
|
|
||||||
// set env var for production
|
// set env var for production
|
||||||
gulp.task('apply-prod-environment', function(done) {
|
gulp.task('apply-prod-environment', function(done) {
|
||||||
process.env.NODE_ENV = 'production'
|
process.env.NODE_ENV = 'production'
|
||||||
done()
|
done()
|
||||||
});
|
});
|
||||||
|
|
||||||
// high level tasks
|
// high level tasks
|
||||||
|
|
||||||
gulp.task('dev', gulp.series('build:scss', 'dev:js', 'copy', gulp.parallel('watch:scss', 'copy:watch', 'dev:reload')))
|
gulp.task('dev',
|
||||||
|
gulp.series(
|
||||||
|
'build:scss',
|
||||||
|
'dev:js',
|
||||||
|
'copy',
|
||||||
|
gulp.parallel(
|
||||||
|
'watch:scss',
|
||||||
|
'copy:watch',
|
||||||
|
'dev:reload'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
gulp.task('build', gulp.series('clean', 'build:scss', gulp.parallel('build:js', 'copy')))
|
gulp.task('build',
|
||||||
gulp.task('dist', gulp.series('apply-prod-environment', 'build', 'zip'))
|
gulp.series(
|
||||||
|
'clean',
|
||||||
|
'build:scss',
|
||||||
|
gulp.parallel(
|
||||||
|
'build:js:extension',
|
||||||
|
'build:js:mascara',
|
||||||
|
'copy'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
gulp.task('dist',
|
||||||
|
gulp.series(
|
||||||
|
'apply-prod-environment',
|
||||||
|
'build',
|
||||||
|
'zip'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
// task generators
|
// task generators
|
||||||
|
|
||||||
|
@ -337,7 +362,7 @@ function zipTask(target) {
|
||||||
|
|
||||||
function generateBundler(opts, performBundle) {
|
function generateBundler(opts, performBundle) {
|
||||||
const browserifyOpts = assign({}, watchify.args, {
|
const browserifyOpts = assign({}, watchify.args, {
|
||||||
entries: ['./app/scripts/'+opts.filename],
|
entries: [opts.filepath],
|
||||||
plugin: 'browserify-derequire',
|
plugin: 'browserify-derequire',
|
||||||
debug: true,
|
debug: true,
|
||||||
fullPaths: debug,
|
fullPaths: debug,
|
||||||
|
@ -384,19 +409,21 @@ function bundleTask(opts) {
|
||||||
return performBundle
|
return performBundle
|
||||||
|
|
||||||
function performBundle(){
|
function performBundle(){
|
||||||
return (
|
|
||||||
|
|
||||||
bundler.bundle()
|
let buildStream = bundler.bundle()
|
||||||
|
|
||||||
// handle errors
|
// handle errors
|
||||||
.on('error', (err) => {
|
buildStream.on('error', (err) => {
|
||||||
beep()
|
beep()
|
||||||
if (opts.watch) {
|
if (opts.watch) {
|
||||||
console.warn(err.stack)
|
console.warn(err.stack)
|
||||||
} else {
|
} else {
|
||||||
throw err
|
throw err
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// process bundles
|
||||||
|
buildStream = buildStream
|
||||||
// convert bundle stream to gulp vinyl stream
|
// convert bundle stream to gulp vinyl stream
|
||||||
.pipe(source(opts.filename))
|
.pipe(source(opts.filename))
|
||||||
// inject variables into bundle
|
// inject variables into bundle
|
||||||
|
@ -412,15 +439,18 @@ function bundleTask(opts) {
|
||||||
})))
|
})))
|
||||||
// writes .map file
|
// writes .map file
|
||||||
.pipe(sourcemaps.write(debug ? './' : '../../sourcemaps'))
|
.pipe(sourcemaps.write(debug ? './' : '../../sourcemaps'))
|
||||||
// write completed bundles
|
|
||||||
.pipe(gulp.dest('./dist/firefox/scripts'))
|
// write completed bundles
|
||||||
.pipe(gulp.dest('./dist/chrome/scripts'))
|
opts.destinations.forEach((dest) => {
|
||||||
.pipe(gulp.dest('./dist/edge/scripts'))
|
buildStream = buildStream.pipe(gulp.dest(dest))
|
||||||
.pipe(gulp.dest('./dist/opera/scripts'))
|
})
|
||||||
// finally, trigger live reload
|
|
||||||
|
// finally, trigger live reload
|
||||||
|
buildStream = buildStream
|
||||||
.pipe(gulpif(debug, livereload()))
|
.pipe(gulpif(debug, livereload()))
|
||||||
|
|
||||||
)
|
return buildStream
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue