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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

Q&A

2回答

2310閲覧

gulpでhamlを一発でコンパイルしたい

oshmtt

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

0グッド

0クリップ

投稿2018/04/21 06:42

gulpでhamlをコンパイルしたいと思っています。プラグインはgulp-hamlを使っています。
terminalでgulp hamlと打てばindex.htmlファイルが生成されるのですができたらgulpって打っただけでコンパイルしてほしいです。
scssのコンパイルは、gulpでコンパイル + gulp-watchも作動し続けるのですが、hamlは毎回gulp-hamlってうった後に、gulpを起動するという二段処理でできたらまとめて行いたいです。

js

1const gulp = require('gulp'); 2const watch = require('gulp-watch'); 3const haml = require('gulp-haml'); 4const sass = require('gulp-ruby-sass'); 5const autoprefixer = require('gulp-autoprefixer'); 6const browser = require('browser-sync'); 7var plumber = require('gulp-plumber'); 8const reload = browser.reload; 9 10const SRC = './src/'; 11const PUBLIC = './public/'; 12 13// Compile Haml into HTML 14gulp.task('haml', function() { 15 gulp.src('./public/**/*.haml'). 16 pipe(plumber()) 17 pipe(haml().on('error', function(e) { console.log(e.message); })). 18 pipe(gulp.dest('./public')); 19}); 20 21// Watch for changes in Haml files 22gulp.task('watch', function() { 23 gulp.src('./public/**/*.haml'). 24 pipe(watch('./public/**/*.haml') ,['haml']). 25 pipe(haml()). 26 pipe(gulp.dest('./public')); 27}) 28 29gulp.task('haml', () => { 30 return sass('public/*.haml', { 31 style: 'compressed' 32 }) 33 .on('error', (err) => { 34 console.error('Error!', err.message); 35 }) 36 .pipe(gulp.dest(PUBLIC)) 37 .pipe(browser.reload({ 38 stream: true 39 })); 40}); 41 42 43gulp.task('server', () => { 44 browser.init(null, { 45 server: { 46 baseDir: PUBLIC 47 }, 48 notify: false, 49 open: 'external', 50 port: 8080, 51 ghostMode: false 52 }); 53}); 54 55 56gulp.task('default', ['server', 'haml',], () => { 57 gulp.watch([SRC + 'public/*.haml'], ['haml']); 58}); 59gulp.task('default', ['server', 'sass',], () => { 60 gulp.watch([SRC + 'scss/*.scss'], ['sass']); 61}); 62

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

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

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

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

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

defghi1977

2018/04/21 07:24

コンパイル処理を一括で行うシェルスクリプトなりコマンドスクリプトなりを組めばよいのでは?
oshmtt

2018/04/21 07:31

なるほど、、!!調べてやってみます、ありがとうこざいます!!!
oshmtt

2018/04/21 07:33

Gulpって入力して、scssとhamlを両方コンパイルさせるのは無理なのでしょうか?(少なくとも上記のコードでは?)
defghi1977

2018/04/21 07:38

そこらへんは私は一切使ったことがないので, 詳細については答えられません. 単なる一般論を述べただけです.
guest

回答2

0

  1. hamlタスクが2つありますがこれは一体なんでしょうか???

lang=javascript

1// Compile Haml into HTML 2gulp.task('haml', function() { 3 gulp.src('./public/**/*.haml'). 4 pipe(plumber()) 5 pipe(haml().on('error', function(e) { console.log(e.message); })). 6 pipe(gulp.dest('./public')); 7}); 8 9gulp.task('haml', () => { 10 return sass('public/*.haml', { 11 style: 'compressed' 12 }) 13 .on('error', (err) => { 14 console.error('Error!', err.message); 15 }) 16 .pipe(gulp.dest(PUBLIC)) 17 .pipe(browser.reload({ 18 stream: true 19 })); 20});
  1. gulp defaultタスクにsassタスクがありますが、sassタスクの処理が見当たりません。

下記に動作するgulefile.jsの一般的なテンプレートを貼り付けておきます。参考にしてください。
EJSの箇所は、htmlに書き換えてお使いください。

lang=javascript

1const gulp = require('gulp'); 2const gulpEjs = require('gulp-ejs'); 3const gulpSass = require('gulp-sass'); 4const gulpSourcemaps = require('gulp-sourcemaps'); 5const gulpPlumber = require('gulp-plumber'); 6const browserSync = require('browser-sync'); 7const gulpRename = require('gulp-rename'); 8 9//ディレクトリ構造を維持してejsをhtmlに変換して出力する 10gulp.task('ejs',function(){ 11 gulp.src(['develop/**/*.ejs', '!develop/**/_*.ejs']) 12 .pipe(gulpPlumber()) 13 .pipe(gulpRename({extname: ".html"})) 14 .pipe(gulp.dest('public')) 15 .pipe(browserSync.reload({ stream: true })); 16}); 17 18//sassをcssにネスト構造で出力する 19gulp.task('sass',function(){ 20 gulp.src(['develop/sass/*.scss', 'develop/sass/common/_*.scss']) 21 .pipe(gulpSourcemaps.init()) 22 .pipe(gulpPlumber()) 23 .pipe(gulpSass({outputStyle: 'expanded'})) 24 .pipe(gulpSourcemaps.write()) 25 .pipe(gulp.dest('public/css')) 26 .pipe(browserSync.reload({ stream: true })); 27}); 28 29gulp.task('browserSync', function() { 30 browserSync({ 31 server: { 32 baseDir: "public", 33 startPath: "./index.html" 34 } 35 }); 36}); 37 38gulp.task('bsReload', function () { 39 browserSync.reload(); 40}); 41 42//ejs,sassを監視 43gulp.task('watch', function () { 44 gulp.watch('develop/**/*', ['ejs', 'sass', 'script']); 45}); 46 47//下記のタスクを実行する 48gulp.task('default', ['browserSync', 'ejs', 'sass', 'script', 'watch']);

投稿2018/04/21 23:44

編集2018/04/21 23:58
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

現状、gulpだけで起動させるとどうなるんですか??

下記の様にwatchタスクとdefaultタスクで分離するのはいかがでしょうか。

lang=javascript

1gulp.task('watch', function () { 2 gulp.watch('./src/**/*', ['haml', 'sass']); 3}); 4 5gulp.task('default', ['server', 'haml', 'sass', 'watch']);

私の環境では、EJSを使用しますが、gulpで叩くとindex.htmlファイルが生成されます。

投稿2018/04/21 07:51

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

oshmtt

2018/04/21 15:13

返信が遅くなりました。現状だと index.htmlが生成されないので```cannot GET/```となります。 ```gulp haml``` → ```gulp```としなくてはいけず、監視もされないのでなんとかしたいと思っています。
退会済みユーザー

退会済みユーザー

2018/04/21 23:22 編集

startPathが無いのが原因ですかね?? gulp.task('browserSync', () => { browserSync({ server: { baseDir: "PUBLIC", startPath: "./index.html" } }); });
退会済みユーザー

退会済みユーザー

2018/04/21 23:26

npm関連で原因が分からなくなったら他の方の解決サイトを見るよりも、公式ドキュメントを見た方が良いですよ。この手はnode.jsのバージョン及びbrouserSyncのバージョンが違うだけで記述方式が異なってきます。公式ドキュメントでも、startPathはnullになっています。なのでstartPathを設定してあげる必要があります。 https://browsersync.io/docs/options#option-startPath
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問