metamask-extension/gulpfile.js

const watchify = require('watchify')
const browserify = require('browserify')
const disc = require('disc')
const gulp = require('gulp')
const source = require('vinyl-source-stream')
const buffer = require('vinyl-buffer')
const gutil = require('gulp-util')
const watch = require('gulp-watch')
const sourcemaps = require('gulp-sourcemaps')
const jsoneditor = require('gulp-json-editor')
const zip = require('gulp-zip')
const assign = require('lodash.assign')
const livereload = require('gulp-livereload')
const del = require('del')
const eslint = require('gulp-eslint')
const fs = require('fs')
const path = require('path')
const manifest = require('./app/manifest.json')
const gulpif = require('gulp-if')
const replace = require('gulp-replace')
const mkdirp = require('mkdirp')
const asyncEach = require('async/each')
const exec = require('child_process').exec
const sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer')
const gulpStylelint = require('gulp-stylelint')
const stylefmt = require('gulp-stylefmt')
const uglify = require('gulp-uglify-es').default
const babel = require('gulp-babel')
const debug = require('gulp-debug')


const disableDebugTools = gutil.env.disableDebugTools
const debugMode = gutil.env.debug

const browserPlatforms = [
  'firefox',
  'chrome',
  'edge',
  'opera',
]
const commonPlatforms = [
  // browser webapp
  'mascara',
  // browser extensions
  ...browserPlatforms
]

// browser reload

gulp.task('dev:reload', function() {
  livereload.listen({
    port: 35729,
  })
})


// copy universal

gulp.task('copy:locales', copyTask({
  source: './app/_locales/',
  destinations: commonPlatforms.map(platform => `./dist/${platform}/_locales`),
}))
gulp.task('copy:images', copyTask({
  source: './app/images/',
  destinations: commonPlatforms.map(platform => `./dist/${platform}/images`),
}))
gulp.task('copy:contractImages', copyTask({
  source: './node_modules/eth-contract-metadata/images/',
  destinations: commonPlatforms.map(platform => `./dist/${platform}/images/contract`),
}))
gulp.task('copy:fonts', copyTask({
  source: './app/fonts/',
  destinations: commonPlatforms.map(platform => `./dist/${platform}/fonts`),
}))
gulp.task('copy:reload', copyTask({
  source: './app/scripts/',
  destinations: commonPlatforms.map(platform => `./dist/${platform}`),
  pattern: '/chromereload.js',
}))
gulp.task('copy:html', copyTask({
  source: './app/',
  destinations: commonPlatforms.map(platform => `./dist/${platform}`),
  pattern: '/*.html',
}))

// copy extension

gulp.task('copy:manifest', copyTask({
  source: './app/',
  destinations: browserPlatforms.map(platform => `./dist/${platform}`),
  pattern: '/*.json',
}))

// copy mascara

gulp.task('copy:html:mascara', copyTask({
  source: './mascara/',
  destinations: [`./dist/mascara/`],
  pattern: 'proxy/index.html',
}))

// manifest tinkering

gulp.task('manifest:chrome', function() {
  return gulp.src('./dist/chrome/manifest.json')
  .pipe(jsoneditor(function(json) {
    delete json.applications
    return json
  }))
  .pipe(gulp.dest('./dist/chrome', { overwrite: true }))
})

gulp.task('manifest:opera', function() {
  return gulp.src('./dist/opera/manifest.json')
  .pipe(jsoneditor(function(json) {
    json.permissions = [
      "storage",
      "tabs",
      "clipboardWrite",
      "clipboardRead",
      "http://localhost:8545/"
    ]
    return json
  }))
  .pipe(gulp.dest('./dist/opera', { overwrite: true }))
})

gulp.task('manifest:production', function() {
  return gulp.src([
    './dist/firefox/manifest.json',
    './dist/chrome/manifest.json',
    './dist/edge/manifest.json',
    './dist/opera/manifest.json',
  ],{base: './dist/'})

  // Exclude chromereload script in production:
  .pipe(gulpif(!debugMode,jsoneditor(function(json) {
    json.background.scripts = json.background.scripts.filter((script) => {
      return !script.includes('chromereload')
    })
    return json
  })))

  .pipe(gulp.dest('./dist/', { overwrite: true }))
})

const copyTaskNames = [
  'copy:locales',
  'copy:images',
  'copy:fonts',
  'copy:manifest',
  'copy:html',
  'copy:html:mascara',
  'copy:contractImages',
]

if (debugMode) {
  copyTaskNames.push('copy:reload')
}

gulp.task('copy',
  gulp.series(
    gulp.parallel(...copyTaskNames),
    'manifest:production',
    'manifest:chrome',
    'manifest:opera'
  )
)
gulp.task('copy:watch', function(){
  gulp.watch(['./app/{_locales,images}/*', './app/scripts/chromereload.js', './app/*.{html,json}'], gulp.series('copy'))
})

// lint js

gulp.task('lint', function () {
  // Ignoring node_modules, dist/firefox, and docs folders:
  return gulp.src(['app/**/*.js', '!app/scripts/vendor/**/*.js', 'ui/**/*.js', 'mascara/src/*.js', 'mascara/server/*.js', '!node_modules/**', '!dist/firefox/**', '!docs/**', '!app/scripts/chromereload.js', '!mascara/test/jquery-3.1.0.min.js'])
    .pipe(eslint(fs.readFileSync(path.join(__dirname, '.eslintrc'))))
    // eslint.format() outputs the lint results to the console.
    // Alternatively use eslint.formatEach() (see Docs).
    .pipe(eslint.format())
    // To have the process exit with an error code (1) on
    // lint error, return the stream and pipe to failAfterError last.
    .pipe(eslint.failAfterError())
});

gulp.task('lint:fix', function () {
  return gulp.src(['app/**/*.js', 'ui/**/*.js', 'mascara/src/*.js', 'mascara/server/*.js', '!node_modules/**', '!dist/firefox/**', '!docs/**', '!app/scripts/chromereload.js', '!mascara/test/jquery-3.1.0.min.js'])
    .pipe(eslint(Object.assign(fs.readFileSync(path.join(__dirname, '.eslintrc')), {fix: true})))
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
});

// scss compilation and autoprefixing tasks

gulp.task('build:scss', function () {
  return gulp.src('ui/app/css/index.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest('ui/app/css/output'))
})
gulp.task('watch:scss', function() {
  gulp.watch(['ui/app/css/**/*.scss'], gulp.series(['build:scss']))
})

gulp.task('lint-scss', function() {
  return gulp
    .src('ui/app/css/itcss/**/*.scss')
    .pipe(gulpStylelint({
      reporters: [
        { formatter: 'string', console: true }
      ],
      fix: true,
    }));
});

gulp.task('fmt-scss', function () {
  return gulp.src('ui/app/css/itcss/**/*.scss')
    .pipe(stylefmt())
    .pipe(gulp.dest('ui/app/css/itcss'));
});

// build js

const buildJsFiles = [
  'inpage',
  'contentscript',
  'background',
  'ui',
]

// bundle tasks
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:js', devMode: true })
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:js:extension'  })
createTasksForBuildJsMascara({ taskPrefix: 'build:js:mascara' })

function createTasksForBuildJsExtension({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) {
  // inpage must be built before all other scripts:
  const rootDir = './app/scripts'
  const nonInpageFiles = buildJsFiles.filter(file => file !== 'inpage')
  const buildPhase1 = ['inpage']
  const buildPhase2 = nonInpageFiles
  const destinations = browserPlatforms.map(platform => `./dist/${platform}`)
  bundleTaskOpts = Object.assign({
    buildSourceMaps: true,
    sourceMapDir: devMode ? './' : '../sourcemaps',
    minifyBuild: !devMode,
    buildWithFullPaths: devMode,
  }, bundleTaskOpts)
  createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1, buildPhase2 })
}

function createTasksForBuildJsMascara({ taskPrefix, devMode, bundleTaskOpts = {} }) {
  // inpage must be built before all other scripts:
  const rootDir = './mascara/src/'
  const buildPhase1 = ['ui', 'proxy', 'background']
  const destinations = ['./dist/mascara']
  bundleTaskOpts = Object.assign({
    buildSourceMaps: true,
    sourceMapDir: './',
    minifyBuild: !devMode,
    buildWithFullPaths: devMode,
  }, bundleTaskOpts)
  createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 })
}

function createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) {
  // bundle task for each file
  const jsFiles = [].concat(buildPhase1, buildPhase2)
  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}`)))

  gulp.task(taskPrefix, gulp.series(subtasks))
}

// disc bundle analyzer tasks

buildJsFiles.forEach((jsFile) => {
  gulp.task(`disc:${jsFile}`, discTask({ label: jsFile, filename: `${jsFile}.js` }))
})

gulp.task('disc', gulp.parallel(buildJsFiles.map(jsFile => `disc:${jsFile}`)))

// clean dist

gulp.task('clean', function clean() {
  return del(['./dist/*'])
})

// zip tasks for distribution
gulp.task('zip:chrome', zipTask('chrome'))
gulp.task('zip:firefox', zipTask('firefox'))
gulp.task('zip:edge', zipTask('edge'))
gulp.task('zip:opera', zipTask('opera'))
gulp.task('zip', gulp.parallel('zip:chrome', 'zip:firefox', 'zip:edge', 'zip:opera'))

// set env for production
gulp.task('apply-prod-environment', function(done) {
  process.env.NODE_ENV = 'production'
  done()
});

// high level tasks

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:extension',
      'build:js:mascara',
      'copy'
    )
  )
)

gulp.task('dist',
  gulp.series(
    'apply-prod-environment',
    'build',
    'zip'
  )
)

// task generators

function copyTask(opts){
  const source = opts.source
  const destination = opts.destination
  const destinations = opts.destinations || [ destination ]
  const pattern = opts.pattern || '/**/*'

  return performCopy

  function performCopy(){
    let stream = gulp.src(source + pattern, { base: source })
    destinations.forEach(function(destination) {
      stream = stream.pipe(gulp.dest(destination))
    })
    stream.pipe(gulpif(debugMode,livereload()))

    return stream
  }
}

function zipTask(target) {
  return () => {
    return gulp.src(`dist/${target}/**`)
    .pipe(zip(`metamask-${target}-${manifest.version}.zip`))
    .pipe(gulp.dest('builds'))
  }
}

function generateBundler(opts, performBundle) {
  const browserifyOpts = assign({}, watchify.args, {
    entries: [opts.filepath],
    plugin: 'browserify-derequire',
    debug: opts.buildSourceMaps,
    fullPaths: opts.buildWithFullPaths,
  })

  let bundler = browserify(browserifyOpts)

  if (opts.watch) {
    bundler = watchify(bundler)
    // on any file update, re-runs the bundler
    bundler.on('update', performBundle)
  }

  return bundler
}

function discTask(opts) {
  opts = Object.assign({
    buildWithFullPaths: true,
  }, opts)

  const bundler = generateBundler(opts, performBundle)
  // output build logs to terminal
  bundler.on('log', gutil.log)

  return performBundle

  function performBundle(){
    // start "disc" build
    const discDir = path.join(__dirname, 'disc')
    mkdirp.sync(discDir)
    const discPath = path.join(discDir, `${opts.label}.html`)

    return (
      bundler.bundle()
      .pipe(disc())
      .pipe(fs.createWriteStream(discPath))
    )
  }
}


function bundleTask(opts) {
  const bundler = generateBundler(opts, performBundle)
  // output build logs to terminal
  bundler.on('log', gutil.log)

  return performBundle

  function performBundle(){

    let buildStream = bundler.bundle()

    // handle errors
    buildStream.on('error', (err) => {
      beep()
      if (opts.watch) {
        console.warn(err.stack)
      } else {
        throw err
      }
    })

    // process bundles
    buildStream = buildStream
      // convert bundle stream to gulp vinyl stream
      .pipe(source(opts.filename))
      // inject variables into bundle
      .pipe(replace('\'GULP_METAMASK_DEBUG\'', debugMode))
      // buffer file contents (?)
      .pipe(buffer())


    // Initialize Source Maps
    if (opts.buildSourceMaps) {
      buildStream = buildStream
        // loads map from browserify file
        .pipe(sourcemaps.init({ loadMaps: true }))
    }

    // Minification
    if (opts.minifyBuild) {
      buildStream = buildStream
        .pipe(uglify({
          mangle: {
            reserved: [ 'MetamaskInpageProvider' ]
          },
        }))
    }

    // Finalize Source Maps (writes .map file)
    if (opts.buildSourceMaps) {
      buildStream = buildStream
        .pipe(sourcemaps.write(opts.sourceMapDir))
    }

    // write completed bundles
    opts.destinations.forEach((dest) => {
      buildStream = buildStream.pipe(gulp.dest(dest))
    })

    // finally, trigger live reload
    buildStream = buildStream
      .pipe(gulpif(debugMode, livereload()))

    return buildStream

  }
}

function beep () {
  process.stdout.write('\x07')
}