Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Build React-Redux written in TSX with Gulp
// 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;
{
"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
You can’t perform that action at this time.