質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

1回答

2330閲覧

gulpで開発を始める時の手順、どうしている?

Fushihara

総合スコア52

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

2クリップ

投稿2018/02/25 03:36

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`]);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Node.jsさっぱりな独学デザイナークラスの人にはオススメなんですが、
質問者さんの技術レベルまで達すると無理にGulpを使う必要はありません。

Gulpはpipeで繋ぐ対象がGulp専用オブジェクトであり、Node.jsが用意しているストリームではありません。
なので、gulp-xxxのパッケージが大量に必要で、サポート切れだったりバージョンの古いgulp-xxxパッケージが登場し始めており筋悪な存在として徐々に浸透しつつあります。
今から触るならnpm-scriptsの方が筋が良いと思います。

nodeのchild_prosess.exec でtsをコンパイル、sassをコンパイル、pugのファイルをコピーして、画像リソースはこのフォルダに配置して・・

child_prosessは微妙ですかね、npm-scriptsを使うべきでしょう。
devDependenciesに放り込んだパッケージはnode_modules/.binの中に実行ファイルが設定され、
npm-scripts時に叩いた時だけパスが通りますので、Node.js製のCLIツール使いたい放題です。

しかもpreなんたらやpostなんたらが用意されており、前処理・後処理も定義できます。
あまりやりすぎるとpackage.jsonが汚れちゃうので、
npm-scriptsからシェルスクリプトを呼んだり連携しても良いと思います。

JSでやらねばならない処理は、プロジェクトのGitHubのREADME.mdなんかを読み込んで、一回requireで使う手段を模索した方が良いでしょう。
シェバン#!/usr/bin/env nodeと書けばNode.jsで動作するコードを定義して実行権限を付与すればシェルスクリプトっぽく呼べるのも良いですね。

gulpで開発を始める時はどのような手順でgulpfileを作っていますでしょうか?

今はgulpを使っていませんが、使ってた時の手段はこんな感じです。

  • プロジェクトルートにtasksを設置する
  • requireでタスクをロードして定義する

gulpfile.jsはその名の通り、gulp.taskはコールバックを指定するタダのJS構文です。
なので第二引数に渡してあげる関数を別途requireで読み込んで上げれば外出し出来るわけです。

gulpfile.jsの中身は質問文をリファクタリングするとこうなります。

JavaScript

1const gulp = require('gulp'); 2 3gulp.task('ts', require('./tasks/ts.js')); 4gulp.task('copy-pug', require('./tasks/copy-pug.js')); 5gulp.task('sass', require('./tasks/sass.js')); 6gulp.task('watch', () => { 7 gulp.watch('./src/script/**/*.ts', ['ts']); 8 gulp.watch('src/script/page/views/**/*.pug', ['copy-pug']); 9 gulp.watch('src/public/css/**/*.scss', ['sass']); 10}); 11gulp.task('nodemon', require('./tasks/nodemon.js')); 12gulp.task('default', ['ts', 'copy-pug', 'sass', 'watch', 'nodemon']);

例としてtasks/ts.jsだけ記載します。

JavaScript

1const gulp = require('gulp'); 2const gulpTypescript = require('gulp-typescript'); 3 4module.exports = () => { 5 const tsProject = gulpTypescript.createProject('tsconfig.json'); 6 gulp.src('./src/script/**/*.ts') 7 .pipe(tsProject()) 8 .pipe(gulp.dest('./out/script/')); 9});

これのメリットはtypescriptのトランスパイルする箇所は独立しており、
gulp-sassみたいなパッケージの宣言が威張ってないですね。
可読性は結構良くなると思います。

肥大化した備えにこういう配置を覚えておくと可読性が上がりそうですが、
質問文クラスのタスクの数ならつらつら書いても良いとは思いますね。

watchやdefaultも外出しももちろん抽象化は可能ですが、
タスクを抽象化してレゴのようにくっつけた方が筋が良さそうという視点からgulpfile.jsに残しています。

投稿2018/02/26 05:00

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問