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

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

ただいまの
回答率

90.33%

  • HTML

    9586questions

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

  • gulp

    289questions

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

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 311

oshmtt

score 1

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

const gulp = require('gulp');
const watch = require('gulp-watch');
const haml = require('gulp-haml');
const sass = require('gulp-ruby-sass');
const autoprefixer = require('gulp-autoprefixer');
const browser = require('browser-sync');
var plumber = require('gulp-plumber');
const reload = browser.reload;

const SRC = './src/';
const PUBLIC = './public/';

// Compile Haml into HTML
gulp.task('haml', function() {
  gulp.src('./public/**/*.haml').
       pipe(plumber())
       pipe(haml().on('error', function(e) { console.log(e.message); })).
       pipe(gulp.dest('./public'));
});

// Watch for changes in Haml files
gulp.task('watch', function() {
  gulp.src('./public/**/*.haml').
       pipe(watch('./public/**/*.haml') ,['haml']).
       pipe(haml()).
       pipe(gulp.dest('./public'));
})

gulp.task('haml', () => {
    return sass('public/*.haml', {
            style: 'compressed'
        })
        .on('error', (err) => {
            console.error('Error!', err.message);
        })
        .pipe(gulp.dest(PUBLIC))
        .pipe(browser.reload({
            stream: true
        }));
});


gulp.task('server', () => {
    browser.init(null, {
        server: {
            baseDir: PUBLIC
        },
        notify: false,
        open: 'external',
        port: 8080,
        ghostMode: false
    });
});


gulp.task('default', ['server', 'haml',], () => {
    gulp.watch([SRC + 'public/*.haml'], ['haml']);
});
gulp.task('default', ['server', 'sass',], () => {
    gulp.watch([SRC + 'scss/*.scss'], ['sass']);
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2018/04/21 16:24

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

    キャンセル

  • oshmtt

    2018/04/21 16:31

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

    キャンセル

  • oshmtt

    2018/04/21 16:33

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

    キャンセル

  • defghi1977

    2018/04/21 16:38

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

    キャンセル

回答 2

0

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

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

gulp.task('watch', function () {
 gulp.watch('./src/**/*', ['haml', 'sass']);
});

gulp.task('default', ['server', 'haml', 'sass', 'watch']);

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/22 00:13

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

    キャンセル

  • 2018/04/22 08:21 編集

    startPathが無いのが原因ですかね??

    gulp.task('browserSync', () => {
    browserSync({
    server: {
    baseDir: "PUBLIC",
    startPath: "./index.html"
    }
    });
    });

    キャンセル

  • 2018/04/22 08:26

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

    キャンセル

0

  1. hamlタスクが2つありますがこれは一体なんでしょうか???
// Compile Haml into HTML
gulp.task('haml', function() {
  gulp.src('./public/**/*.haml').
    pipe(plumber())
    pipe(haml().on('error', function(e) { console.log(e.message); })).
    pipe(gulp.dest('./public'));
});

gulp.task('haml', () => {
  return sass('public/*.haml', {
    style: 'compressed'
  })
  .on('error', (err) => {
    console.error('Error!', err.message);
  })
  .pipe(gulp.dest(PUBLIC))
  .pipe(browser.reload({
    stream: true
  }));
});
  1. gulp defaultタスクにsassタスクがありますが、sassタスクの処理が見当たりません。

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

const gulp = require('gulp');
const gulpEjs = require('gulp-ejs');
const gulpSass = require('gulp-sass');
const gulpSourcemaps = require('gulp-sourcemaps');
const gulpPlumber = require('gulp-plumber');
const browserSync = require('browser-sync');
const gulpRename = require('gulp-rename');

//ディレクトリ構造を維持してejsをhtmlに変換して出力する
gulp.task('ejs',function(){
  gulp.src(['develop/**/*.ejs', '!develop/**/_*.ejs'])
  .pipe(gulpPlumber())
  .pipe(gulpRename({extname: ".html"}))
  .pipe(gulp.dest('public'))
  .pipe(browserSync.reload({ stream: true }));
});

//sassをcssにネスト構造で出力する
gulp.task('sass',function(){
  gulp.src(['develop/sass/*.scss', 'develop/sass/common/_*.scss'])
  .pipe(gulpSourcemaps.init())
  .pipe(gulpPlumber())
  .pipe(gulpSass({outputStyle: 'expanded'}))
  .pipe(gulpSourcemaps.write())
  .pipe(gulp.dest('public/css'))
  .pipe(browserSync.reload({ stream: true }));
});

gulp.task('browserSync', function() {
  browserSync({
  server: {
    baseDir: "public",
    startPath: "./index.html"
    }
  });
});

gulp.task('bsReload', function () {
  browserSync.reload();
});

//ejs,sassを監視
gulp.task('watch', function () {
  gulp.watch('develop/**/*', ['ejs', 'sass', 'script']);
});

//下記のタスクを実行する
gulp.task('default', ['browserSync', 'ejs', 'sass', 'script', 'watch']);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    9586questions

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

  • gulp

    289questions

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