From a50c46e1295887dde8264c76cdf4867bac08dbd7 Mon Sep 17 00:00:00 2001 From: tsm Date: Tue, 1 Mar 2016 12:46:39 +0100 Subject: [PATCH 1/5] [css, css-lint] - add npm dependencies --- package.json | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/package.json b/package.json index 1fc454d9e..a91c10ff2 100644 --- a/package.json +++ b/package.json @@ -34,16 +34,21 @@ "license": "MIT", "devDependencies": { "async": "^1.4.2", + "autoprefixer": "^6.3.3", "browser-sync": "^2.11.1", "chalk": "^1.1.1", + "colorguard": "^1.0.1", "connect": "^3.4.1", "connect-history-api-fallback": "^1.1.0", "connect-livereload": "^0.5.3", + "cssnano": "^3.5.2", "del": "^2.2.0", + "doiuse": "^2.3.0", "event-stream": "^3.3.2", "express": "~4.13.1", "extend": "^3.0.0", "gulp": "^3.9.0", + "gulp-cached": "^1.1.0", "gulp-concat": "^2.5.2", "gulp-cssnano": "^2.0.0", "gulp-filter": "^2.0.2", @@ -51,6 +56,7 @@ "gulp-inline-ng2-template": "^1.1.0", "gulp-load-plugins": "^0.10.0", "gulp-plumber": "~1.0.1", + "gulp-postcss": "^6.1.0", "gulp-shell": "~0.4.3", "gulp-sourcemaps": "~1.6.0", "gulp-template": "^3.0.0", @@ -74,6 +80,10 @@ "ng2lint": "0.0.9", "open": "0.0.5", "phantomjs-prebuilt": "^2.1.4", + "postcss-assets": "^4.0.1", + "postcss-cssnext": "^2.4.0", + "postcss-filter-stream": "0.0.6", + "postcss-reporter": "^1.3.3", "protractor": "^3.0.0", "remap-istanbul": "^0.5.1", "rimraf": "^2.5.2", @@ -82,6 +92,7 @@ "serve-static": "^1.10.2", "slash": "~1.0.0", "stream-series": "^0.1.1", + "stylelint": "^4.4.0", "systemjs-builder": "^0.15.10", "tiny-lr": "^0.2.1", "traceur": "^0.0.91", From 862494643daec731b334bbef32a76e89236301bb Mon Sep 17 00:00:00 2001 From: tsm Date: Tue, 1 Mar 2016 20:37:51 +0100 Subject: [PATCH 2/5] implement css pre-processing --- gulpfile.ts | 4 +- package.json | 6 --- src/app/components/toolbar.component.css | 2 +- tools/config.ts | 14 +++++ tools/manual_typings/autoprefixer.d.ts | 8 +++ tools/manual_typings/cssnano.d.ts | 8 +++ tools/manual_typings/postcss-assets.d.ts | 12 +++++ tools/tasks/build.html_css.prod.ts | 41 --------------- tools/tasks/build.html_css.ts | 67 ++++++++++++++++++++++++ tools/tasks/build.js.prod.ts | 6 +-- tools/tasks/copy.js.prod.ts | 18 +++++++ 11 files changed, 133 insertions(+), 53 deletions(-) create mode 100644 tools/manual_typings/autoprefixer.d.ts create mode 100644 tools/manual_typings/cssnano.d.ts create mode 100644 tools/manual_typings/postcss-assets.d.ts delete mode 100644 tools/tasks/build.html_css.prod.ts create mode 100644 tools/tasks/build.html_css.ts create mode 100644 tools/tasks/copy.js.prod.ts diff --git a/gulpfile.ts b/gulpfile.ts index c855b00f1..3257badf1 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -17,6 +17,7 @@ gulp.task('build.dev', done => runSequence('clean.dev', 'tslint', 'build.assets.dev', + 'build.html_css', 'build.js.dev', 'build.index.dev', done)); @@ -44,7 +45,8 @@ gulp.task('build.prod', done => runSequence('clean.prod', 'tslint', 'build.assets.prod', - 'build.html_css.prod', + 'build.html_css', + 'copy.js.prod', 'build.js.prod', 'build.bundles', 'build.bundles.app', diff --git a/package.json b/package.json index a91c10ff2..f206874ab 100644 --- a/package.json +++ b/package.json @@ -37,13 +37,11 @@ "autoprefixer": "^6.3.3", "browser-sync": "^2.11.1", "chalk": "^1.1.1", - "colorguard": "^1.0.1", "connect": "^3.4.1", "connect-history-api-fallback": "^1.1.0", "connect-livereload": "^0.5.3", "cssnano": "^3.5.2", "del": "^2.2.0", - "doiuse": "^2.3.0", "event-stream": "^3.3.2", "express": "~4.13.1", "extend": "^3.0.0", @@ -81,9 +79,6 @@ "open": "0.0.5", "phantomjs-prebuilt": "^2.1.4", "postcss-assets": "^4.0.1", - "postcss-cssnext": "^2.4.0", - "postcss-filter-stream": "0.0.6", - "postcss-reporter": "^1.3.3", "protractor": "^3.0.0", "remap-istanbul": "^0.5.1", "rimraf": "^2.5.2", @@ -92,7 +87,6 @@ "serve-static": "^1.10.2", "slash": "~1.0.0", "stream-series": "^0.1.1", - "stylelint": "^4.4.0", "systemjs-builder": "^0.15.10", "tiny-lr": "^0.2.1", "traceur": "^0.0.91", diff --git a/src/app/components/toolbar.component.css b/src/app/components/toolbar.component.css index ce098ac81..39e7fef10 100644 --- a/src/app/components/toolbar.component.css +++ b/src/app/components/toolbar.component.css @@ -16,7 +16,7 @@ h1 { } more { - background: url("./assets/svg/more.svg"); + background: resolve("more.svg"); float: right; height: 24px; margin-top: 12px; diff --git a/tools/config.ts b/tools/config.ts index 8a91d66a7..f5d90b6a3 100644 --- a/tools/config.ts +++ b/tools/config.ts @@ -119,6 +119,20 @@ export const SYSTEM_BUILDER_CONFIG = { } }; +// ---------------- +// Autoprefixer configuration. +export const BROWSER_LIST = [ + 'ie >= 10', + 'ie_mob >= 10', + 'ff >= 30', + 'chrome >= 34', + 'safari >= 7', + 'opera >= 23', + 'ios >= 7', + 'android >= 4.4', + 'bb >= 10' +]; + // -------------- // Private. diff --git a/tools/manual_typings/autoprefixer.d.ts b/tools/manual_typings/autoprefixer.d.ts new file mode 100644 index 000000000..0daa68f43 --- /dev/null +++ b/tools/manual_typings/autoprefixer.d.ts @@ -0,0 +1,8 @@ +declare module 'autoprefixer' { + interface Options { + browsers?: string | string[] + } + function autoprefixer(options: Options): NodeJS.ReadWriteStream; + module autoprefixer {} + export = autoprefixer; +} diff --git a/tools/manual_typings/cssnano.d.ts b/tools/manual_typings/cssnano.d.ts new file mode 100644 index 000000000..552b04d14 --- /dev/null +++ b/tools/manual_typings/cssnano.d.ts @@ -0,0 +1,8 @@ +declare module 'cssnano' { + interface Options { + discardComments?: Object + } + function cssnano(options: Options): NodeJS.ReadWriteStream; + module cssnano {} + export = cssnano; +} diff --git a/tools/manual_typings/postcss-assets.d.ts b/tools/manual_typings/postcss-assets.d.ts new file mode 100644 index 000000000..f46e22271 --- /dev/null +++ b/tools/manual_typings/postcss-assets.d.ts @@ -0,0 +1,12 @@ +declare module 'postcss-assets' { + interface Options { + relative?: boolean, + cachebuster?: boolean | Function, + basePath?: string, + baseUrl?: string, + loadPaths: string[] + } + function postCSSAssets(options: Options): NodeJS.ReadWriteStream; + module postCSSAssets {} + export = postCSSAssets; +} diff --git a/tools/tasks/build.html_css.prod.ts b/tools/tasks/build.html_css.prod.ts deleted file mode 100644 index b1f0f0d8e..000000000 --- a/tools/tasks/build.html_css.prod.ts +++ /dev/null @@ -1,41 +0,0 @@ -import * as merge from 'merge-stream'; -import {join} from 'path'; -import { - APP_SRC, - TMP_DIR, - PROD_DEPENDENCIES, - CSS_PROD_BUNDLE, - CSS_DEST -} from '../config'; - -export = function buildJSDev(gulp, plugins) { - return function () { - - return merge(minifyComponentCss(), prepareTemplates(), processExternalCss()); - - function prepareTemplates() { - return gulp.src(join(APP_SRC, '**', '*.html')) - .pipe(gulp.dest(TMP_DIR)); - } - - function minifyComponentCss() { - return gulp.src([ - join(APP_SRC, '**', '*.css'), - '!' + join(APP_SRC, 'assets', '**', '*.css') - ]) - .pipe(plugins.cssnano()) - .pipe(gulp.dest(TMP_DIR)); - } - - function processExternalCss() { - return gulp.src(getExternalCss().map(r => r.src)) - .pipe(plugins.cssnano()) - .pipe(plugins.concat(CSS_PROD_BUNDLE)) - .pipe(gulp.dest(CSS_DEST)); - } - - function getExternalCss() { - return PROD_DEPENDENCIES.filter(d => /\.css$/.test(d.src)); - } - }; -}; diff --git a/tools/tasks/build.html_css.ts b/tools/tasks/build.html_css.ts new file mode 100644 index 000000000..36d7bd909 --- /dev/null +++ b/tools/tasks/build.html_css.ts @@ -0,0 +1,67 @@ +import * as merge from 'merge-stream'; +import * as autoprefixer from 'autoprefixer'; +import * as assets from 'postcss-assets'; +import * as cssnano from 'cssnano'; +import {join} from 'path'; +import { + APP_SRC, + TMP_DIR, + PROD_DEPENDENCIES, + CSS_PROD_BUNDLE, + CSS_DEST, + APP_DEST, + BROWSER_LIST, + ENV +} from '../config'; + +const processors = [ + autoprefixer({ + browsers: BROWSER_LIST + }), + assets({ + basePath: APP_DEST, + loadPaths: [join('assets', '**', '*')] + }) +]; + +const isProd = ENV === 'prod'; + +if (isProd) { + processors.push( + cssnano({ + discardComments: {removeAll: true} + }) + ); +} + +export = function buildHTMLCSS(gulp, plugins) { + return function () { + + return merge(processComponentCss(), prepareTemplates(), processExternalCss()); + + function prepareTemplates() { + return gulp.src(join(APP_SRC, '**', '*.html')) + .pipe(gulp.dest(TMP_DIR)); + } + + function processComponentCss() { + return gulp.src([ + join(APP_SRC, '**', '*.css'), + '!' + join(APP_SRC, 'assets', '**', '*.css') + ]) + .pipe(plugins.postcss(processors)) + .pipe(gulp.dest(isProd ? TMP_DIR: APP_DEST)); + } + + function processExternalCss() { + return gulp.src(getExternalCss().map(r => r.src)) + .pipe(plugins.postcss(processors)) + .pipe(isProd ? plugins.concat(CSS_PROD_BUNDLE) : plugins.util.noop()) + .pipe(gulp.dest(CSS_DEST)); + } + + function getExternalCss() { + return PROD_DEPENDENCIES.filter(d => /\.css$/.test(d.src)); + } + }; +}; diff --git a/tools/tasks/build.js.prod.ts b/tools/tasks/build.js.prod.ts index 12a79186f..0603eee0e 100644 --- a/tools/tasks/build.js.prod.ts +++ b/tools/tasks/build.js.prod.ts @@ -1,5 +1,5 @@ import {join} from 'path'; -import {APP_SRC, TMP_DIR} from '../config'; +import {TMP_DIR} from '../config'; import {templateLocals, tsProjectFn} from '../utils'; const INLINE_OPTIONS = { @@ -14,9 +14,7 @@ export = function buildJSProd(gulp, plugins) { let src = [ 'typings/browser.d.ts', 'tools/manual_typings/**/*.d.ts', - join(APP_SRC, '**/*.ts'), - '!' + join(APP_SRC, '**/*.spec.ts'), - '!' + join(APP_SRC, '**/*.e2e.ts') + join(TMP_DIR, '**/*.ts') ]; let result = gulp.src(src) .pipe(plugins.plumber()) diff --git a/tools/tasks/copy.js.prod.ts b/tools/tasks/copy.js.prod.ts new file mode 100644 index 000000000..18d921625 --- /dev/null +++ b/tools/tasks/copy.js.prod.ts @@ -0,0 +1,18 @@ +import {join} from 'path'; +import { + APP_SRC, + TMP_DIR +} from '../config'; + +export = function copyJSProd(gulp, plugins) { + return function () { + + let src = [ + join(APP_SRC, '**/*.ts'), + '!' + join(APP_SRC, '**/*.spec.ts'), + '!' + join(APP_SRC, '**/*.e2e.ts') + ]; + return gulp.src(src) + .pipe(gulp.dest(TMP_DIR)); + }; +}; From d2579d47ec399967de685794d97f48542f5304dd Mon Sep 17 00:00:00 2001 From: tsm Date: Tue, 1 Mar 2016 20:45:29 +0100 Subject: [PATCH 3/5] optimize for incremental build --- tools/tasks/build.html_css.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tools/tasks/build.html_css.ts b/tools/tasks/build.html_css.ts index 36d7bd909..70c685c3b 100644 --- a/tools/tasks/build.html_css.ts +++ b/tools/tasks/build.html_css.ts @@ -49,12 +49,14 @@ export = function buildHTMLCSS(gulp, plugins) { join(APP_SRC, '**', '*.css'), '!' + join(APP_SRC, 'assets', '**', '*.css') ]) + .pipe(isProd ? plugins.cached('process-component-css') : plugins.util.noop()) .pipe(plugins.postcss(processors)) .pipe(gulp.dest(isProd ? TMP_DIR: APP_DEST)); } function processExternalCss() { return gulp.src(getExternalCss().map(r => r.src)) + .pipe(isProd ? plugins.cached('process-external-css') : plugins.util.noop()) .pipe(plugins.postcss(processors)) .pipe(isProd ? plugins.concat(CSS_PROD_BUNDLE) : plugins.util.noop()) .pipe(gulp.dest(CSS_DEST)); From 49b0c341e3a5e44f4601bd7b62c6292564893a6a Mon Sep 17 00:00:00 2001 From: tsm Date: Tue, 1 Mar 2016 20:50:22 +0100 Subject: [PATCH 4/5] delete gulp-cssnano --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index f206874ab..015583ff0 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,6 @@ "gulp": "^3.9.0", "gulp-cached": "^1.1.0", "gulp-concat": "^2.5.2", - "gulp-cssnano": "^2.0.0", "gulp-filter": "^2.0.2", "gulp-inject": "^1.3.1", "gulp-inline-ng2-template": "^1.1.0", From 601da67408f06f6b69589b053e60dbf87d4cf1a7 Mon Sep 17 00:00:00 2001 From: tsm Date: Tue, 1 Mar 2016 21:38:29 +0100 Subject: [PATCH 5/5] use APP_ASSETS --- tools/tasks/build.html_css.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/tasks/build.html_css.ts b/tools/tasks/build.html_css.ts index 70c685c3b..08e8619de 100644 --- a/tools/tasks/build.html_css.ts +++ b/tools/tasks/build.html_css.ts @@ -6,7 +6,7 @@ import {join} from 'path'; import { APP_SRC, TMP_DIR, - PROD_DEPENDENCIES, + APP_ASSETS, CSS_PROD_BUNDLE, CSS_DEST, APP_DEST, @@ -63,7 +63,7 @@ export = function buildHTMLCSS(gulp, plugins) { } function getExternalCss() { - return PROD_DEPENDENCIES.filter(d => /\.css$/.test(d.src)); + return APP_ASSETS.filter(d => /\.css$/.test(d.src)); } }; };