Created
February 28, 2019 07:18
-
-
Save sharapeco/39f48e1fc93f1517e660934e4d04199e to your computer and use it in GitHub Desktop.
Build React-Redux written in TSX with Gulp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Gulp utilities | |
const {src, dest, watch, series, parallel} = require("gulp"); | |
const source = require("vinyl-source-stream"); | |
const buffer = require("vinyl-buffer"); | |
const streamify = require("gulp-streamify"); | |
const rename = require("gulp-rename"); | |
const sourcemaps = require("gulp-sourcemaps"); | |
// Error handling | |
const plumber = require('gulp-plumber'); | |
const notifier = require('node-notifier'); | |
String.prototype.PIPE = function(fn) { return fn(this); }; | |
const head = (n = 3) => (str) => str.split("\n").slice(0, n).join("\n"); | |
// TypeScript | |
const ts = require("gulp-typescript"); | |
const browserify = require("browserify"); | |
const tsify = require("tsify"); | |
const uglify = require("gulp-uglify-es").default; | |
function server(cb) { | |
return src("src/**/*.ts") | |
.pipe(sourcemaps.init()) | |
.pipe(ts({ | |
})) | |
.pipe(sourcemaps.write("./")) | |
.pipe(dest("build")); | |
} | |
function client(cb) { | |
return browserify() | |
.add("src/client.tsx") | |
.plugin(tsify, { | |
target: "es6", | |
jsx: "react", | |
noImplicitAny: true, | |
removeComments: true, | |
preserveConstEnums: false, | |
moduleResolution: "node", | |
}) | |
.bundle() | |
.on("error", error => notifier.notify({ | |
title: "TypeScript しっぱいしたワン", | |
message: error.toString().PIPE(head(3)), | |
}, () => console.log(error.toString()))) | |
.pipe(source("client.js")) | |
.pipe(buffer()) | |
.pipe(sourcemaps.init()) | |
.pipe(uglify()) | |
.pipe(sourcemaps.write("./")) | |
.pipe(dest("html/assets")); | |
} | |
function watchClient() { | |
return watch(["src/**/*.ts", "src/**/*.tsx"], client); | |
} | |
// Less CSS | |
const less = require("gulp-less"); | |
const groupCSSMediaQueries = require("gulp-group-css-media-queries"); | |
const cssmin = require("gulp-cssmin"); | |
function css() { | |
return src("less/all.less", {base: "less"}) | |
.pipe(plumber({ | |
errorHandler: error => notifier.notify({ | |
title: "Less しっぱいしたニャン", | |
message: error.toString().PIPE(head(3)), | |
}, () => console.log(error.toString())) | |
})) | |
.pipe(less()) | |
.pipe(groupCSSMediaQueries()) | |
.pipe(cssmin()) | |
.pipe(rename({basename: "style"})) | |
.pipe(dest("html/assets")); | |
} | |
function watchCss() { | |
return watch(["less/**/*.less"], css); | |
} | |
// Expose | |
const expose = { | |
server, | |
client, | |
css, | |
"dev-client": series(parallel(client, css), parallel(watchClient, watchCss)), | |
}; | |
expose.default = cb => { | |
console.log("\nCommands are:"); | |
Object.keys(expose).forEach(task => { | |
console.log(` ${task}`); | |
}); | |
console.log(""); | |
cb(); | |
}; | |
module.exports = expose; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "A Project", | |
"version": "1.0.0", | |
"dependencies": { | |
"@types/react": "^16.8.5", | |
"@types/react-dom": "^16.8.2", | |
"react": "^16.8.3", | |
"react-dom": "^16.8.3", | |
"react-redux": "^6.0.1", | |
"redux": "^4.0.1" | |
}, | |
"devDependencies": { | |
"@types/express": "^4.16.1", | |
"@types/react-redux": "^7.0.1", | |
"browserify": "^16.2.3", | |
"eslint": "^5.14.1", | |
"eslint-config-standard": "^12.0.0", | |
"eslint-plugin-import": "^2.16.0", | |
"eslint-plugin-node": "^8.0.1", | |
"eslint-plugin-promise": "^4.0.1", | |
"eslint-plugin-standard": "^4.0.0", | |
"gulp": "^4.0.0", | |
"gulp-cssmin": "^0.2.0", | |
"gulp-group-css-media-queries": "^1.2.2", | |
"gulp-less": "^4.0.1", | |
"gulp-notify": "^3.2.0", | |
"gulp-plumber": "^1.2.1", | |
"gulp-rename": "^1.4.0", | |
"gulp-sourcemaps": "^2.6.5", | |
"gulp-streamify": "^1.0.2", | |
"gulp-typescript": "^5.0.0", | |
"gulp-uglify-es": "^1.0.4", | |
"tsify": "^4.0.1", | |
"tslint": "^5.12.1", | |
"tslint-config-airbnb": "^5.11.1", | |
"typescript": "^3.3.3333", | |
"vinyl-buffer": "^1.0.1", | |
"vinyl-source-stream": "^2.0.0" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment