Skip to content
This repository has been archived by the owner on Jun 14, 2020. It is now read-only.

Commit

Permalink
Upgrade to 0.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@dsebastien
dsebastien committed Jan 10, 2016
1 parent 1c0d223 commit 1bb98ce
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 99 deletions.
21 changes: 19 additions & 2 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
* 0.2.4
* ...
* 0.3.0
* Breaking change: improved integration with tsconfig.json (see #72)
* this might impact existing projects
* before, the list of folders to include in TS compilation were hardcoded. Now, the tsconfig.json file is used, thus you have more control (but also more responsibility)
* removed mentions of tsd. My current recommendation is to use `typings`, although there's nothing forcing you to with the build
* https://github.com/typings/typings
* https://angularclass.com/the-state-of-typescript-packages/
* upgraded dependencies
* Babel dependencies 6.3.x to 6.4.x
* autoprefixer 6.1.x to 6.2.x
* Known issues
* #76: there is an issue with the way that gulp-typescript (the plugin used within the scripts-typescript gulp task) handles the 'rootDir' property, which is inconsistent with tsc.
* to solve this, for now you need to add a reference to the main typings file of your project; Example:
```
/// <reference path="../../typings/main.d.ts" />
```
* the final solution might come via the following issues and might require a new release of this project
* https://github.com/ivogabe/gulp-typescript/issues/190
* https://github.com/typings/typings/issues/69
* 0.2.3
* fixed sourcemap generation issues (see #69)
* sourcemaps sometime require a browser refresh before actually working: this might be due to a related issue (timing issue?)
Expand Down
148 changes: 73 additions & 75 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,10 @@ Note that this project is heavily inspired from:
## Features
* ES2015 and TypeScript support
* built-in HTTP server with live reloading & cross-device synchronization (BrowserSync)
* configured to support CORS
* awesome developer experience with a change detection mechanism that automagically:
* transpiles TypeScript > ES5 w/ sourcemaps
* transpiles ES2015 > ES5 w/ sourcemaps
* transpiles TypeScript > ESx w/ sourcemaps (you choose the target version)
* transpiles ES2015 > ESx w/ sourcemaps (you choose the target version)
* transpiles SASS > CSS w/ sourcemaps
* checks JavaScript/TypeScript code quality/style and report on the console (without breaking the build)
* ...
Expand Down Expand Up @@ -259,89 +260,87 @@ The tsconfig.json file contains:
* TypeScript code style rules
* the list of files/folders to include/exclude

Here's is the minimal required contents for ModernWebDevBuild:
Here's is the minimal required contents for ModernWebDevBuild. Note that the outDir value is important as it tells the compiler where to write the generated code! Make sure that you also DO have the rootDir property defined and pointing to "./app", otherwise the build will fail (more precisely, `npm run serve` will fail).

The build depends on the presence of those settings.

```
{
"version": "1.7.3",
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitOnError": false,
"preserveConstEnums": true,
"inlineSources": false,
"sourceMap": false,
"outDir": "./.tmp",
"project": "./app",
"moduleResolution": "node",
"listFiles": false
},
"filesGlob": [
"./typings/*.d.ts",
"./app/**/*.ts"
],
"exclude": [
"node_modules",
"jspm_packages"
]
"version": "1.7.3",
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitOnError": false,
"preserveConstEnums": true,
"inlineSources": false,
"sourceMap": false,
"outDir": "./.tmp",
"rootDir": "./app",
"moduleResolution": "node",
"listFiles": false
},
"exclude": [
"node_modules",
"jspm_packages",
"typings/browser",
"typings/browser.d.ts"
]
}
```

Here's a more complete example including code style rules:

```
{
"version": "1.7.3",
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitOnError": false,
"preserveConstEnums": true,
"inlineSources": false,
"sourceMap": false,
"outDir": "./.tmp",
"project": "./app",
"moduleResolution": "node",
"listFiles": false
},
"formatCodeOptions": {
"indentSize": 2,
"tabSize": 4,
"newLineCharacter": "\r\n",
"convertTabsToSpaces": false,
"insertSpaceAfterCommaDelimiter": true,
"insertSpaceAfterSemicolonInForStatements": true,
"insertSpaceBeforeAndAfterBinaryOperators": true,
"insertSpaceAfterKeywordsInControlFlowStatements": true,
"insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"placeOpenBraceOnNewLineForFunctions": false,
"placeOpenBraceOnNewLineForControlBlocks": false
},
"filesGlob": [
"./typings/*.d.ts",
"./app/**/*.ts"
],
"exclude": [
"node_modules",
"jspm_packages"
]
"version": "1.7.3",
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitOnError": false,
"preserveConstEnums": true,
"inlineSources": false,
"sourceMap": false,
"outDir": "./.tmp",
"rootDir": "./app",
"moduleResolution": "node",
"listFiles": false
},
"formatCodeOptions": {
"indentSize": 2,
"tabSize": 4,
"newLineCharacter": "\r\n",
"convertTabsToSpaces": false,
"insertSpaceAfterCommaDelimiter": true,
"insertSpaceAfterSemicolonInForStatements": true,
"insertSpaceBeforeAndAfterBinaryOperators": true,
"insertSpaceAfterKeywordsInControlFlowStatements": true,
"insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"placeOpenBraceOnNewLineForFunctions": false,
"placeOpenBraceOnNewLineForControlBlocks": false
},
"exclude": [
"node_modules",
"jspm_packages",
"typings/browser",
"typings/browser.d.ts"
]
}
```

Note that `filesGlob` is not officially supported in TypeScript.
Note the exclusion that we have made, all of which are relevant and there to avoid known issues (e.g., https://github.com/typings/discussions/issues/6 if you are using typings).

#### tslint.json
tslint.json is the configuration file for [TSLint](https://github.com/palantir/tslint).
Expand Down Expand Up @@ -685,6 +684,7 @@ options.distEntryPoint = "core/core.bootstrap";

Available options:
* distEntryPoint: must be a relative path from .tmp/ to the file to use as entry point for creating the production JS bundle. The extension does not need to be specified (JSPM is used to load the file)
* by default, the following file is used: `core/boot.js`
* minifyProductionJSBundle: by default, the production JS bundle is minified, but you can disable it by setting this option to false
* mangleProductionJSBundle: by default, the production JS bundle is mangled, but you can disable it by setting this option to false
* minifyProductionHTML: by default, the production HTML is minified, but you can disable it by setting this option to false
Expand All @@ -710,7 +710,7 @@ Check out [gulp-inline-source](https://www.npmjs.com/package/gulp-inline-source)
* babel: ES2015 to ES5 transpiler; used for the gulp build
* typescript: the typescript tools (compiler, ...)
* systemjs-builder: build tool for systemjs allows to create a single-file build of mixed-dependency module trees: https://www.npmjs.com/package/systemjs-builder
* browser-sync: live CSS reload & browser syncing: https://www.npmjs.com/package/browser-sync
* browser-sync: live reloading & browser syncing: https://www.npmjs.com/package/browser-sync
* del: deletes files/folders: https://www.npmjs.com/package/del
* gulp-autoprefixer: automatically adds vendor prefixes to CSS: https://www.npmjs.com/package/gulp-autoprefixer
* gulp-cache: temp file based caching proxy task for gulp: https://www.npmjs.com/package/gulp-cache
Expand Down Expand Up @@ -742,10 +742,8 @@ Check out [gulp-inline-source](https://www.npmjs.com/package/gulp-inline-source)
* gulp-cssimport: replace CSS imports by stylesheet contents: https://www.npmjs.com/package/gulp-cssimport
* gulp-nice-package: validate npm's package.json file: https://www.npmjs.com/package/gulp-nice-package/
* gulp-inject: JavaScript, stylesheet and webcomponent injection: https://www.npmjs.com/package/gulp-inject
* gulp-tsd: TSD plugin for gulp: https://www.npmjs.com/package/gulp-tsd
* gulp-tslint: Linter for TypeScript code: https://www.npmjs.com/package/gulp-tslint
* gulp-typescript: TypeScript transpiler plugin for gulp: https://www.npmjs.com/package/gulp-typescript
* tsd: TypeScript Definition manager: https://www.npmjs.com/package/tsd
* gulp-babel: ES2015 to ES5 transpiler plugin for gulp: https://www.npmjs.com/package/gulp-babel
* gulp-jscs: JavaScript code style checker plugin for gulp: https://www.npmjs.com/package/gulp-jscs
* gulp-jscs-stylish: Stylish reporter for gulp-jscs: https://www.npmjs.com/package/gulp-jscs-stylish
Expand Down
17 changes: 17 additions & 0 deletions UPGRADE.MD
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
# Upgrade guide

## From 0.2.3 to 0.3.0
The gulp scripts-typescript task has changed. Now, instead of using an hardcoded list of paths to compile, it loads what you have configured in your tsconfig.json configuration file.
Make sure that you DO have:
* a tsconfig.json file :)
* the `rootDir` property defined and pointing to "./app", otherwise the build will fail (more precisely, `npm run serve` will fail).
* the `outDir` property defined and pointing to "./.tmp", (same issue otherwise)

I've updated the example `tsconfig.json` file in the README, so please do refer to that.

Check out the CHANGELOG list of known issues, there's an important catch with typings.


Next, the babel dependency was upgraded to 6.4.x, meaning that it probably would be best for you to also upgrade.
The following babel dependencies should be upgraded to 6.4.x:
* babel-core
* babel-plugin-transform-es2015-modules-commonjs

## From 0.2.2 to 0.2.3
No modification mandatory with this release.

Expand Down
12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "modern-web-dev-build",
"description": "Modern Web Development Build.",
"version": "0.2.4",
"version": "0.3.0",
"author": {
"name": "Sebastien Dubois",
"email": "[email protected]",
Expand Down Expand Up @@ -33,12 +33,12 @@
"karma-jasmine": "0.3.x"
},
"dependencies": {
"autoprefixer": "6.1.x",
"babel-core": "6.3.x",
"babel-plugin-transform-es2015-modules-commonjs": "6.3.x",
"autoprefixer": "6.2.x",
"babel-core": "6.4.x",
"babel-plugin-transform-es2015-modules-commonjs": "6.4.x",
"babel-preset-es2015": "6.3.x",
"babel-runtime": "6.3.x",
"browser-sync": "2.10.x",
"browser-sync": "2.11.x",
"connect-history-api-fallback": "1.1.0",
"del": "2.2.x",
"event-stream": "3.3.x",
Expand Down Expand Up @@ -97,7 +97,7 @@
"karma-jspm": "2.0.x"
},
"peerDependencies": {
"babel-core": "6.3.x",
"babel-core": "6.4.x",
"gulp": "3.9.x",
"jspm": "0.16.x",
"nodemon": "1.8.x",
Expand Down
12 changes: 4 additions & 8 deletions src/gulp/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,10 @@ let javascript = {
};

let typescript = {
src: [
folders.app + globs.scripts.typescript,
files.typeScriptDefinitions // reference to .d.ts files
],
srcAppOnly: [
folders.app + globs.scripts.typescript
],
dest: folders.temp // ES5 code is emitted in the temp folder
dest: folders.temp // JavaScript code is emitted in the temp folder
};

let styles = {
Expand All @@ -104,8 +100,8 @@ let styles = {
folders.app + globs.styles.sass,
utils.exclude(folders.app + globs.styles.vendor)
],
dest: folders.temp, // during DEV
destFiles: folders.temp + globs.styles.css, // during DEV
dest: folders.temp, // for DEV
destFiles: folders.temp + globs.styles.css, // for DEV
destDist: folders.dist + folders.styles, // for PROD
finalCssBundleFilename: "bundle.min.css",
finalCssBundlePath: folders.styles + "/bundle.min.css",
Expand Down Expand Up @@ -153,7 +149,7 @@ let autoprefixerBrowsers = [
"bb >= 10"
];

let minifyCss = { // https://www.npmjs.com/package/gulp-minify-g
let minifyCss = { // https://www.npmjs.com/package/gulp-minify
keepBreaks: false, // no problem here
keepSpecialComments: true, // necessary for licensing
compatibility: false, // no problem here
Expand Down
20 changes: 12 additions & 8 deletions src/gulp/tasks/scripts-typescript.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use strict";

import AbstractTaskLoader from "../abstractTaskLoader";
import config from "../config";
//import config from "../config";
//import utils from "../utils";

import sourcemaps from "gulp-sourcemaps";
Expand All @@ -13,30 +13,33 @@ class ScriptsTypeScriptTaskLoader extends AbstractTaskLoader {
registerTask(gulp){
super.registerTask(gulp);

gulp.task("scripts-typescript", "Transpile TypeScript to ES5, include references to library and app .d.ts files and generate sourcemaps", () =>{
gulp.task("scripts-typescript", "Transpile TypeScript to ES, include references to library and app .d.ts files and generate sourcemaps", (callback) =>{
// references:
// https://www.npmjs.com/package/gulp-typescript
let tsProject = ts.createProject("tsconfig.json", {
const tsProject = ts.createProject("tsconfig.json", {
typescript: require("typescript") // override the typescript version by that defined in package.json

// configuration defined in tsconfig.json
// other overrides here if needed
// http://json.schemastore.org/tsconfig
// https://github.com/Microsoft/TypeScript/wiki/Compiler%20Options
});
//console.log(tsProject.config.compilerOptions);
const tsConfigOutDir = tsProject.config.compilerOptions.outDir;

let tsResult = gulp.plumbedSrc(config.typescript.src) // handle errors nicely (i.e., without breaking watch)
const tsResult = tsProject.src()
// Display the files in the stream
//.pipe(debug({title: "Stream contents:", minimal: true}))
.pipe(sourcemaps.init())
.pipe(ts(
tsProject
));

// Output files
tsResult.dts.pipe(gulp.dest(config.typescript.dest));
// Output type definition files
tsResult.dts.pipe(gulp.dest(tsConfigOutDir));

return tsResult.js
// Output js files
tsResult.js

// Display the files in the stream
//.pipe(debug({title: "Stream contents:", minimal: true}))
Expand All @@ -47,12 +50,13 @@ class ScriptsTypeScriptTaskLoader extends AbstractTaskLoader {
}))

// Output files
.pipe(gulp.dest(config.typescript.dest))
.pipe(gulp.dest(tsConfigOutDir))

// Task result
.pipe(size({
title: "scripts-typescript"
}));
callback();
});
}
}
Expand Down

0 comments on commit 1bb98ce

Please sign in to comment.