express pug typescript sassを使ったwebアプリを作っています。
色々なモジュールを使ってはいますが、作るのは自分用でページが一つ二つしかないシンプルなアプリです。
今までは自力でbuild.jsを書いて、nodeのchild_prosess.exec でtsをコンパイル、sassをコンパイル、pugのファイルをコピーして、画像リソースはこのフォルダに配置して・・とやっていたのですが、さすがに非効率かなと思ってgulpを試してみました。ファイル更新時にexpressを立ち上げ直すのも面倒だし。
gulpfile.jsとしては以下のような感じになったのですが、パスを一つひとつ指定するのが面倒だし、次に別のwebアプリを作る時にまたやり直しとなるとうんざりしてしまいます。
既に「どこそこに置いたファイルは監視されてるのか、何のタスクでコピーされるのか、不要なファイルはちゃんと除外されているか」がわからなくなってしまいました。
そこで皆さんにお伺いしたいのですが、gulpで開発を始める時はどのような手順でgulpfileを作っていますでしょうか?
公式のどこそこにあるサンプルで全部事が足りるのか、自分なりのテンプレートを一つ持っていてそれをベースにしているのか。
それとも、gulpを日常的に使うとこれくらいはサラッと書けるようになるから全然気にならないのか・・・
よろしくお願いします。
const gulp = require('gulp'); const sass = require("gulp-sass"); const autoprefixer = require("gulp-autoprefixer"); const gulpTypescript = require('gulp-typescript'); const gulpNodemon = require('gulp-nodemon'); gulp.task("ts", () => { const tsProject = gulpTypescript.createProject('tsconfig.json'); gulp.src('./src/script/**/*.ts') .pipe(tsProject()) .pipe(gulp.dest('./out/script/')); }); gulp.task("copy-pug", () => { gulp.src('src/script/page/views/**/*.pug') .pipe(gulp.dest('out/script/page/views/')); }); gulp.task("sass", () => { gulp.src("src/public/css/**/*.scss") .pipe(sass()) .pipe(gulp.dest("out/public/css")); }); gulp.task('watch', function () { gulp.watch(`./src/script/**/*.ts`, [`ts`]); gulp.watch(`src/script/page/views/**/*.pug`, [`copy-pug`]); gulp.watch(`src/public/css/**/*.scss`, [`sass`]); }); gulp.task('nodemon',function(cd) { let start = false; return gulpNodemon({ script: './out/script/express.js', ext : 'js css html pug', }).on('start',function() { if(!start) { cd(); start = true; } }); }); gulp.task('default', [`ts`,`copy-pug`,`sass`,`watch`,`nodemon`]);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。