diff options
author | Maximilian Hils <git@maximilianhils.com> | 2015-10-08 12:43:55 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2015-10-08 12:43:55 +0200 |
commit | 7d8191ee37a4e085d23217f85e41f4da4c9e4069 (patch) | |
tree | dc7642c64a2c65b65bf8a995e12e918b0c97c607 /web | |
parent | 442f079e0b4e715897318f378f8a08d7f2271990 (diff) | |
download | mitmproxy-7d8191ee37a4e085d23217f85e41f4da4c9e4069.tar.gz mitmproxy-7d8191ee37a4e085d23217f85e41f4da4c9e4069.tar.bz2 mitmproxy-7d8191ee37a4e085d23217f85e41f4da4c9e4069.zip |
update web builds, use watchify
Diffstat (limited to 'web')
-rw-r--r-- | web/.eslintrc | 8 | ||||
-rw-r--r-- | web/.jshintrc | 5 | ||||
-rw-r--r-- | web/conf.js | 8 | ||||
-rw-r--r-- | web/gulpfile.js | 278 | ||||
-rw-r--r-- | web/package.json | 61 | ||||
-rw-r--r-- | web/src/css/vendor.less | 2 | ||||
-rw-r--r-- | web/src/fonts/FontAwesome.otf (renamed from web/src/fontawesome/FontAwesome.otf) | bin | 85908 -> 85908 bytes | |||
-rw-r--r-- | web/src/fonts/README (renamed from web/src/fontawesome/README) | 0 | ||||
-rw-r--r-- | web/src/fonts/font-awesome.css (renamed from web/src/fontawesome/font-awesome.css) | 0 | ||||
-rw-r--r-- | web/src/fonts/fontawesome-webfont.eot (renamed from web/src/fontawesome/fontawesome-webfont.eot) | bin | 56006 -> 56006 bytes | |||
-rw-r--r-- | web/src/fonts/fontawesome-webfont.svg (renamed from web/src/fontawesome/fontawesome-webfont.svg) | 0 | ||||
-rw-r--r-- | web/src/fonts/fontawesome-webfont.ttf (renamed from web/src/fontawesome/fontawesome-webfont.ttf) | bin | 112160 -> 112160 bytes | |||
-rw-r--r-- | web/src/fonts/fontawesome-webfont.woff (renamed from web/src/fontawesome/fontawesome-webfont.woff) | bin | 65452 -> 65452 bytes | |||
-rw-r--r-- | web/src/js/components/eventlog.js | 1 | ||||
-rw-r--r-- | web/src/js/filt/filt.js | 2 |
15 files changed, 154 insertions, 211 deletions
diff --git a/web/.eslintrc b/web/.eslintrc new file mode 100644 index 00000000..df187739 --- /dev/null +++ b/web/.eslintrc @@ -0,0 +1,8 @@ +{ + "ecmaFeatures": { + "jsx": true + }, + "env": { + "es6": true + } +}
\ No newline at end of file diff --git a/web/.jshintrc b/web/.jshintrc deleted file mode 100644 index d5eae073..00000000 --- a/web/.jshintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "loopfunc": true, - "esnext": true, - "validthis": true -}
\ No newline at end of file diff --git a/web/conf.js b/web/conf.js index 69984c01..7c520973 100644 --- a/web/conf.js +++ b/web/conf.js @@ -13,21 +13,19 @@ var conf = { "react/addons" ], app: 'src/js/app.js', - jshint: ["src/js/**.js", "!src/js/filt/filt.js"] + eslint: ["src/js/**/*.js", "!src/js/filt/filt.js"] }, css: { vendor: ["src/css/vendor.less"], app: ["src/css/app.less"] }, copy: [ - "src/images/**", + "src/images/**", "src/fonts/fontawesome-webfont.*" ], templates: [ "src/templates/*" ], - fonts: ["src/fontawesome/fontawesome-webfont.*"], - peg: ["src/js/filt/filt.peg"], - connect: false + peg: ["src/js/filt/filt.peg"] }; module.exports = conf;
\ No newline at end of file diff --git a/web/gulpfile.js b/web/gulpfile.js index b05998d3..83893c91 100644 --- a/web/gulpfile.js +++ b/web/gulpfile.js @@ -4,11 +4,12 @@ var packagejs = require('./package.json'); var conf = require('./conf.js'); // Sorted alphabetically! +var babelify = require('babelify'); var browserify = require('browserify'); var gulp = require("gulp"); var concat = require('gulp-concat'); var connect = require('gulp-connect'); -var jshint = require("gulp-jshint"); +var eslint = require('gulp-eslint'); var less = require("gulp-less"); var livereload = require("gulp-livereload"); var minifyCSS = require('gulp-minify-css'); @@ -18,26 +19,16 @@ var plumber = require("gulp-plumber"); var react = require("gulp-react"); var rename = require("gulp-rename"); var replace = require('gulp-replace'); -var rev = require("gulp-rev"); var sourcemaps = require('gulp-sourcemaps'); -var uglify = require('gulp-uglify'); +var gutil = require("gulp-util"); var _ = require('lodash'); var map = require("map-stream"); var reactify = require('reactify'); +var uglifyify = require('uglifyify'); var buffer = require('vinyl-buffer'); var source = require('vinyl-source-stream'); var transform = require('vinyl-transform'); - -// FIXME: react-with-addons.min.js for prod use issue -// FIXME: Sourcemap URLs don't work correctly. -// FIXME: Why don't we use gulp-rev's manifest feature? - -var manifest = { - "vendor.css": "vendor.css", - "app.css": "app.css", - "vendor.js": "vendor.js", - "app.js": "app.js", -}; +var watchify = require('watchify'); var vendor_packages = _.difference( _.union( @@ -47,45 +38,7 @@ var vendor_packages = _.difference( conf.js.vendor_excludes ); - -// Custom linting reporter used for error notify -var jsHintErrorReporter = function(){ - return map(function (file, cb) { - if (file.jshint && !file.jshint.success) { - file.jshint.results.forEach(function (err) { - if (err) { - var msg = [ - path.basename(file.path), - 'Line: ' + err.error.line, - 'Reason: ' + err.error.reason - ]; - notify.onError( - "Error: <%= error.message %>" - )(new Error(msg.join("\n"))); - } - }); - } - cb(null, file); - }) -}; - -function save_rev(){ - return map(function(file, callback){ - if (file.revOrigBase){ - manifest[path.basename(file.revOrigPath)] = path.basename(file.path); - } - callback(null, file); - }) -} - -var dont_break_on_errors = function(){ - return plumber( - function(error){ - notify.onError("Error: <%= error.message %>").apply(this, arguments); - this.emit('end'); - } - ); -}; +var handleError = {errorHandler: notify.onError("Error: <%= error.message %>")}; /* * Sourcemaps are a wonderful way to develop directly from the chrome devtools. @@ -94,193 +47,178 @@ var dont_break_on_errors = function(){ * a single misbehaving transform breaks everything. * Thus, we just manually fix all paths. */ -//Normalize \ to / on Windows. -function unixStylePath(filePath) { - return filePath.split(path.sep).join('/'); -} -// Hijack the sourceRoot attr to do our transforms -function fixSourceMapPaths(file){ +function fixSourceMaps(file) { file.sourceMap.sources = file.sourceMap.sources.map(function (x) { - return unixStylePath(path.relative(".", x)); + return path.relative(".", x).split(path.sep).join('/'); }); return "/"; } // Browserify fails for paths starting with "..". -function fixBrowserifySourceMapPaths(file){ - file.sourceMap.sources = file.sourceMap.sources.map(function (x) { - return x.replace("src/js/node_modules","node_modules"); +function fixBrowserifySourceMaps(file) { + file.sourceMap.sources = file.sourceMap.sources.map((x) => { + return x.replace("src/js/node_modules", "node_modules"); }); - return fixSourceMapPaths(file); + return fixSourceMaps(file); +} +function fixLessSourceMaps(file) { + file.sourceMap.sources = file.sourceMap.sources.map((x) => { + if(!x.startsWith("..")){ + return "../src/css/" + x; + } + return x.replace("src/js/node_modules", "node_modules"); + }); + return fixSourceMaps(file); } -gulp.task("fonts", function () { - return gulp.src(conf.fonts) - .pipe(gulp.dest(conf.static + "/fonts")) -}); - -function styles_dev(files) { - return (gulp.src(files) - .pipe(dont_break_on_errors()) +function styles(files, dev){ + return gulp.src(files) + .pipe(dev ? plumber(handleError) : gutil.noop()) .pipe(sourcemaps.init()) .pipe(less()) - .pipe(sourcemaps.write(".", {sourceRoot: fixSourceMapPaths})) + .pipe(dev ? gutil.noop() : minifyCSS()) + .pipe(sourcemaps.write(".", {sourceRoot: fixLessSourceMaps})) .pipe(gulp.dest(conf.static)) - .pipe(livereload({ auto: false }))); + .pipe(livereload({auto: false})); } -gulp.task("styles-app-dev", function(){ - styles_dev(conf.css.app); +gulp.task("styles-app-dev", function () { + styles(conf.css.app, true); }); -gulp.task("styles-vendor-dev", function(){ - styles_dev(conf.css.vendor); +gulp.task("styles-vendor-dev", function () { + styles(conf.css.vendor, true); }); - - -function styles_prod(files) { - return (gulp.src(files) - .pipe(less()) - .pipe(minifyCSS()) - .pipe(rev()) - .pipe(save_rev()) - .pipe(gulp.dest(conf.static)) - .pipe(livereload({ auto: false }))); -} -gulp.task("styles-app-prod", function(){ - styles_prod(conf.css.app); +gulp.task("styles-app-prod", function () { + styles(conf.css.app, false); }); -gulp.task("styles-vendor-prod", function(){ - styles_prod(conf.css.vendor); +gulp.task("styles-vendor-prod", function () { + styles(conf.css.app, false); }); -function vendor_stream(debug){ - var vendor = browserify(vendor_packages, {debug: debug}); - _.each(vendor_packages, function(v){ - vendor.require(v); +function buildScript(bundler, filename, dev) { + if (dev) { + bundler = watchify(bundler); + } else { + bundler = bundler.transform({global: true}, uglifyify); + } + + function rebundle() { + return bundler.bundle() + .pipe(dev ? plumber(handleError) : gutil.noop()) + .pipe(source('bundle.js')) + .pipe(buffer()) + .pipe(sourcemaps.init({loadMaps: true})) + .pipe(rename(filename)) + .pipe(sourcemaps.write('.', {sourceRoot: fixBrowserifySourceMaps})) + .pipe(gulp.dest(conf.static)) + .pipe(livereload({auto: false})); + } + + // listen for an update and run rebundle + bundler.on('update', rebundle); + bundler.on('log', gutil.log); + + // run it once the first time buildScript is called + return rebundle(); +} + +function vendor_stream(dev) { + var bundler = browserify({ + entries: [], + debug: true, + cache: {}, // required for watchify + packageCache: {} // required for watchify }); - return vendor.bundle() - .pipe(source("dummy.js")) - .pipe(rename("vendor.js")); + for (var vp of vendor_packages) { + bundler.require(vp); + } + return buildScript(bundler, "vendor.js", dev); } -gulp.task("scripts-vendor-dev", function (){ - return vendor_stream(false) - .pipe(gulp.dest(conf.static)); +gulp.task("scripts-vendor-dev", function () { + return vendor_stream(true); }); -gulp.task("scripts-vendor-prod", function(){ - return vendor_stream(false) - .pipe(buffer()) - .pipe(uglify()) - .pipe(rev()) - .pipe(save_rev()) - .pipe(gulp.dest(conf.static)); +gulp.task("scripts-vendor-prod", function () { + return vendor_stream(false); }); - -function app_stream(debug) { - var browserified = transform(function(filename) { - var b = browserify(filename, {debug: debug}); - _.each(vendor_packages, function(v){ - b.external(v); - }); - b.transform(reactify); - return b.bundle(); +function app_stream(dev) { + var bundler = browserify({ + entries: [conf.js.app], + debug: true, + cache: {}, // required for watchify + packageCache: {} // required for watchify }); - - return gulp.src([conf.js.app], {base: "."}) - .pipe(dont_break_on_errors()) - .pipe(browserified) - .pipe(sourcemaps.init({ loadMaps: true })) - .pipe(rename("app.js")); + for (var vp of vendor_packages) { + bundler.external(vp); + } + bundler = bundler.transform(babelify).transform(reactify); + return buildScript(bundler, "app.js", dev); } - gulp.task('scripts-app-dev', function () { - return app_stream(true) - .pipe(sourcemaps.write('./', {sourceRoot: fixBrowserifySourceMapPaths})) - .pipe(gulp.dest(conf.static)) - .pipe(livereload({ auto: false })); + return app_stream(true); }); - gulp.task('scripts-app-prod', function () { - return app_stream(true) - .pipe(buffer()) - .pipe(uglify()) - .pipe(rev()) - .pipe(sourcemaps.write('./', {sourceRoot: fixBrowserifySourceMapPaths})) - .pipe(save_rev()) - .pipe(gulp.dest(conf.static)); + return app_stream(false); }); -gulp.task("jshint", function () { - return gulp.src(conf.js.jshint) - .pipe(dont_break_on_errors()) - .pipe(react()) - .pipe(jshint()) - .pipe(jshint.reporter("jshint-stylish")) - .pipe(jsHintErrorReporter()); +gulp.task("eslint", function () { + return gulp.src(conf.js.eslint) + .pipe(plumber(handleError)) + .pipe(eslint()) + .pipe(eslint.format()) }); -gulp.task("copy", function(){ +gulp.task("copy", function () { return gulp.src(conf.copy, {base: conf.src}) .pipe(gulp.dest(conf.static)); }); -function templates(){ + +gulp.task('templates', function(){ return gulp.src(conf.templates, {base: conf.src}) - .pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) { - return manifest[p1]; - })) .pipe(gulp.dest(conf.dist)); -} -gulp.task('templates', templates); +}); gulp.task("peg", function () { return gulp.src(conf.peg, {base: conf.src}) - .pipe(dont_break_on_errors()) + .pipe(plumber(handleError)) .pipe(peg()) .pipe(gulp.dest("src/")); }); -gulp.task('connect', function() { - if(conf.connect){ - connect.server({ - port: conf.connect.port - }); - } -}); - gulp.task( "dev", [ - "fonts", "copy", "styles-vendor-dev", "styles-app-dev", "scripts-vendor-dev", "peg", "scripts-app-dev", - ], - templates + "templates" + ] ); gulp.task( "prod", [ - "fonts", "copy", "styles-vendor-prod", "styles-app-prod", "scripts-vendor-prod", "peg", "scripts-app-prod", - ], - templates + "templates" + ] ); -gulp.task("default", ["dev", "connect"], function () { +gulp.task("default", ["dev"], function () { livereload.listen({auto: true}); gulp.watch(["src/css/vendor*"], ["styles-vendor-dev"]); - gulp.watch(conf.peg, ["peg", "scripts-app-dev"]); - gulp.watch(["src/js/**"], ["scripts-app-dev", "jshint"]); gulp.watch(["src/css/**"], ["styles-app-dev"]); + gulp.watch(conf.templates, ["templates"]); + gulp.watch(conf.peg, ["peg"]); + gulp.watch(["src/js/**"], ["eslint"]); + // other JS is handled by watchify. gulp.watch(conf.copy, ["copy"]); }); diff --git a/web/package.json b/web/package.json index e55081a3..5bcbdd87 100644 --- a/web/package.json +++ b/web/package.json @@ -16,37 +16,40 @@ }, "dependencies": { "bootstrap": "^3.3.4", - "flux": "", - "jquery": "", - "lodash": "", - "react": "^0.13.1", + "flux": "^2.1.1", + "jquery": "^2.1.4", + "lodash": "^3.10.1", + "react": "^0.13.3", "react-router": "^0.13.2" }, "devDependencies": { - "browserify": "=8.0.1", - "gulp": "", - "gulp-concat": "", - "gulp-connect": "", - "gulp-jshint": "", - "gulp-less": "", - "gulp-livereload": "", - "gulp-minify-css": "", - "gulp-notify": "", - "gulp-peg": "", - "gulp-plumber": "", - "gulp-react": "", - "gulp-rename": "", - "gulp-replace": "", - "gulp-rev": "", - "gulp-sourcemaps": "", - "gulp-uglify": "", - "jest-cli": "^0.1.18", - "jshint-stylish": "", - "lodash": "", - "map-stream": "", - "reactify": "", - "vinyl-buffer": "", - "vinyl-source-stream": "", - "vinyl-transform": "" + "babelify": "^6.3.0", + "browserify": "^11.2.0", + "eslint": "^1.5.1", + "gulp": "^3.9.0", + "gulp-concat": "^2.6.0", + "gulp-connect": "^2.2.0", + "gulp-eslint": "^1.0.0", + "gulp-jshint": "^1.11.2", + "gulp-less": "^3.0.3", + "gulp-livereload": "^3.8.1", + "gulp-minify-css": "^1.2.1", + "gulp-notify": "^2.2.0", + "gulp-peg": "^0.1.2", + "gulp-plumber": "^1.0.1", + "gulp-react": "^3.0.1", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.5.4", + "gulp-sourcemaps": "^1.6.0", + "gulp-uglify": "^1.4.1", + "gulp-util": "^3.0.6", + "lodash": "^3.10.1", + "map-stream": "0.0.6", + "reactify": "^1.1.1", + "uglifyify": "^3.0.1", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0", + "vinyl-transform": "^1.0.0", + "watchify": "^3.4.0" } } diff --git a/web/src/css/vendor.less b/web/src/css/vendor.less index 13c72299..e91ae3a8 100644 --- a/web/src/css/vendor.less +++ b/web/src/css/vendor.less @@ -1,3 +1,3 @@ // Bootstrap @import 'vendor-bootstrap.less'; -@import (less) '../fontawesome/font-awesome.css'; +@import (less) '../fonts/font-awesome.css'; diff --git a/web/src/fontawesome/FontAwesome.otf b/web/src/fonts/FontAwesome.otf Binary files differindex 81c9ad94..81c9ad94 100644 --- a/web/src/fontawesome/FontAwesome.otf +++ b/web/src/fonts/FontAwesome.otf diff --git a/web/src/fontawesome/README b/web/src/fonts/README index 218a78e1..218a78e1 100644 --- a/web/src/fontawesome/README +++ b/web/src/fonts/README diff --git a/web/src/fontawesome/font-awesome.css b/web/src/fonts/font-awesome.css index 9eb5d5b7..9eb5d5b7 100644 --- a/web/src/fontawesome/font-awesome.css +++ b/web/src/fonts/font-awesome.css diff --git a/web/src/fontawesome/fontawesome-webfont.eot b/web/src/fonts/fontawesome-webfont.eot Binary files differindex 84677bc0..84677bc0 100644 --- a/web/src/fontawesome/fontawesome-webfont.eot +++ b/web/src/fonts/fontawesome-webfont.eot diff --git a/web/src/fontawesome/fontawesome-webfont.svg b/web/src/fonts/fontawesome-webfont.svg index d907b25a..d907b25a 100644 --- a/web/src/fontawesome/fontawesome-webfont.svg +++ b/web/src/fonts/fontawesome-webfont.svg diff --git a/web/src/fontawesome/fontawesome-webfont.ttf b/web/src/fonts/fontawesome-webfont.ttf Binary files differindex 96a3639c..96a3639c 100644 --- a/web/src/fontawesome/fontawesome-webfont.ttf +++ b/web/src/fonts/fontawesome-webfont.ttf diff --git a/web/src/fontawesome/fontawesome-webfont.woff b/web/src/fonts/fontawesome-webfont.woff Binary files differindex 628b6a52..628b6a52 100644 --- a/web/src/fontawesome/fontawesome-webfont.woff +++ b/web/src/fonts/fontawesome-webfont.woff diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index 4c6dafb1..fea7b247 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -108,6 +108,7 @@ var ToggleFilter = React.createClass({ }); var EventLog = React.createClass({ + mixins: [common.Navigation], getInitialState: function () { return { filter: { diff --git a/web/src/js/filt/filt.js b/web/src/js/filt/filt.js index 02a04c66..45b42f3a 100644 --- a/web/src/js/filt/filt.js +++ b/web/src/js/filt/filt.js @@ -1771,4 +1771,4 @@ module.exports = (function() { SyntaxError: SyntaxError, parse: parse }; -})(); +})();
\ No newline at end of file |