web-dev-qa-db-ja.com

Gulp4-Gulpfile.jsを設定

Gulp 4のドキュメントを見つけるのが非常に難しいので、誰かが助けてくれるかどうかここで尋ねるかもしれないと思いました。

とにかく私はGulpにかなり慣れておらず、開発に使用する仮想マシンで実行するまで、問題なくGulp3を使用しています。私のgulpファイルは非常に単純です。gulp-sassを使用してSASSをcssファイルにコンパイルします。これは正常に機能していましたが、cssファイルを保存するたびにファイルの書き込み権限が変更され、ブラウザーはファイルを読み取ることができません。

少し調べてみたところ、これはGulp3の問題でありGulp4で修正されたようです--- https://github.com/gulpjs/gulp/issues/1012 を参照してください。だから私はGulp4を試してみようと思ったので、ここの指示に従って更新しました http://www.ociweb.com/resources/publications/sett/gulp-4/ しかし、私は実際の問題を抱えていますドキュメントが見つからないため、実際のgulpfile.jsを設定します。これは私が現時点でつなぎ合わせたものですが、運がありません...残念ながら私のjsスキルが不足しています!!

ここにGulp4ファイルの例- https://Gist.github.com/demisx/beef93591edc1521330a

Gulpfileに必要なのは、gulp-sassを使用してsassをコンパイルすることだけです。

// include gulp
var gulp = require('gulp');

// include plugins
var sass = require('gulp-sass');


var paths = {
  dirs: {
    build: './furniture/css'
  },
  sass: './furniture/sass/**/*.scss'
};


// Shared tasks
gulp.task('glob', function () {
  var pattern = '.build/**/*.css';

  gulp.src(pattern, { read:false })
    .pipe(using());
});

// SASS

gulp.task('sass', function () {
  return gulp.src(paths.sass)
    .pipe(sass())
    .pipe(changed(paths.dirs.build))
    .pipe(gulp.dest(paths.dirs.build))
    .pipe(grep('./furniture/css', { read: false, dot: true }))
});

gulp.task('watch:styles', function () {
  gulp.watch(paths.sass, 'sass');
});

// Default task
gulp.task('default'('build', 'ws', 'watch'));
gulpgulp-sass
8
Andy

さて、私たちはあなたが得ているエラーについてもう少し情報が必要かもしれません。ただし、問題がgulpfile.jsを機能させるだけの場合は、ここで機能するはずです。

あなたがすでに解決策を理解しているなら、それなら素晴らしい。しかし、これに出くわした他の人のために、私はいくつかのヒントを与えます、そしてそれからこれはうまくいくはずです。

インデックス

  • 最初に：gulp3をアンインストールしてgulp4をインストールします
    • Gulp 4を使用するために、インストールとアンインストールの手順を説明します。
  • 2番目：gulp4が機能するかどうかを確認するためのテスト
    • 試してみる最も基本的なバージョンを紹介します。それが機能する場合は、
  • 3番目：最終的なgulpfileバージョン
    • あなたが私に見せたファイルに基づいてあなたが言及したニーズのために私が提供する2番目のバージョンを試してみてください。
  • 最後に：Gulp4と現在のgulp4ビルドに関するいくつかのメモ
    1. 表示されているgulpfileに基づいて、Gulp4に関するいくつかのポインタを示します。
    2. そして、現在のgulp4ビルド0.4.0のクイックフィックス

最初：gulp3をアンインストールしてgulp4をインストールする

システムから元のgulpをまだ削除していない場合は、削除する必要があります。また、追加した場合は、プロジェクトの依存関係として削除する必要があります。

_npm uninstall -g gulp
cd {your-project-dir}
npm uninstall gulp
_

次に、依存関係としてgulp4をグローバルにプロジェクトにインストールする必要があります。

_npm install -g gulpjs/gulp-cli#4.0
_

プロジェクト内：

_npm install --save-dev gulpjs/gulp-cli#4.0
_

重要な注意事項

現在は_gulpjs/gulp#4.0_（_gulp-cli_ではなくgulp）

2番目：gulp4が機能するかどうかを確認するためのテスト

Gulpfileの基本バージョン：
注：コピーして貼り付ける場合は、gulp.src（...）パスと.pipe（gulp.dest（...））パスを変更します。

_// =========================================================
// gulpfile.js
// =========================================================
var gulp        = require('gulp'),
    sass        = require('gulp-sass');

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function(){
    return gulp.src("path/to/sass-file.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("path/to/css-destination.css"))
});

// --------------------------------------- Default Gulp Task
gulp.task('default', function(){
    console.log("It's working!");
});
_

Gulp4が機能しているかどうかを調べてみましょう。

  1. ターミナルでデフォルトのgulpタスクを実行します。

    gulp

    • ターミナルに_It's working!_が表示されている場合は、gulp4が正しくインストールされていることがわかります。
    • 「動作しています！」と表示された場合いくつかのエラーもあり、それらを解決する必要がありますが、問題はgulpfile.jsファイルにあるはずです。 （これが投稿されてからしばらく経っている場合は、最新のインストール/アンインストール手順と最新のgulp 4チュートリアルも参照してください）。
    • エラーが表示されただけの場合（および「動作しています！」がまったく表示されない場合）は、gulp 4が正しくインストールされていないか、gulp 3が正しく削除されていない可能性があり、gulp3と4の両方をアンインストールしてgulpを再インストールする必要があります。 4. 注：これは、さまざまなソースからのさまざまなインストール手順を試した場合に特に発生する可能性があります。

  2. それが機能した場合：

    • sassが以前に作成したcssファイル（既存のプロジェクトの場合）をバックアップし、それらのcssファイルを削除してから、
    • 次に、ターミナルでsassタスクを実行してみてください。

    _gulp sass_

それが機能した（それらのファイルを作成した）場合は、すべてが機能しており、以下の他のスニペットに進みます。

3番目：最終的なgulpfileバージョン

表示されているgulpfile.jsに基づいたニーズのソリューションは次のとおりです。

_// =========================================================
// gulpfile.js
// =========================================================
// ------------------------------------------------ requires
var gulp = require('gulp'),
    sass = require('gulp-sass');

// ------------------------------------------------- configs
var paths = {
  sass: {
    src: './furniture/sass/**/*.{scss,sass}',
    dest: './furniture/css',
    opts: {

    }
  }
};

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function () {
  return gulp.src(paths.sass.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.sass.dest))
});

// ------------------------------------ Gulp Testing Message
gulp.task('message', function(){
  console.log('It works!!');
});

// ---------------------------------------------- Gulp Watch
gulp.task('watch:styles', function () {
  gulp.watch(paths.sass.src, gulp.series('sass'));
});

gulp.task('watch', gulp.series('sass',
  gulp.parallel('watch:styles')
));


// -------------------------------------------- Default task
gulp.task('default', gulp.series('sass', 
  gulp.parallel('message', 'watch')
));
_

これが最終バージョンであると言いましたが、_gulp.series_と_gulp.parallel_が機能していることを示すために、オプションのmessageタスクをgulpfileに残しました。以下の最後のセクションで簡単に説明します。必須ではなく、削除される場合があります。

また、次の内容を含む監視タスクを追加したことに気付くかもしれません。
gulp.series('sass', gulp.parallel('watch:styles'))これは、将来、_watch:_タスクを追加できるようにするためです。例えば_watch:scripts_。

gulp.series('sass'...)部分は、純粋に便利なメソッドです。コードを記述してからgulpタスクを実行する場合は、変更が反映される前に、コードを再度変更する必要があります。監視タスクを実行する前に最初に_'sass'_を追加すると、変更の監視を開始する前にトランスパイルされます。

最後に：Gulp4と現在のgulp4ビルドに関するいくつかのメモ

1.表示されているgulpfileに基づいて、Gulp4に関するいくつかのポインタを示します。

Gulp4は現在以下を使用しています。

  • _gulp.series_：実行するものの順序を制御します。完了するまで、タスクを順番に実行します。例：
    gulp.series('task-name-1', 'task-name-2')
  • 'gulp.parallel'：以前にgulp 3が実行したのと同時にタスクを実行します。例：
    gulp.parallel('task-name-3', 'task-name-4')

  • seiresとparallelを一緒に使用して、タスクのフローをより適切に制御できます。例：

    _gulp.task('example', 
  gulp.series('thisTaskIsRunFirst', 'thisSecond',
    gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
));  
_

2.そして現在のgulp4ビルドのクイックフィックス

これらの例では、_gulp.series_タスクで_watch:styles_を使用したことに気付くでしょう。

_    // ---------------------------------------------- Gulp Watch
    gulp.task('watch:styles', function () {
      gulp.watch(paths.sass, gulp.series('sass'));
    });
_

これはおそらく、gulp4ウォッチメソッドのバグが原因です。 _'sass'_を使用するだけでは監視タスクを機能させることができず、代わりにgulp.series('sass')を使用する必要があったため、これが当てはまると思います。
gulp 4を自分で学んだとき、他の人がgulp 4の例で従来のウォッチタスク形式を使用していたので、おそらくそれはバグだと言いました。

_gulp.task('watch', function(){
  gulp.watch('path/of/files/to/watch/**/*.scss', 'sass');
});
_

Gulp watchを使用するには、この回避策を考え出す必要がありました。これは問題ありません。また、必要に応じて、他のタスクを実行することで他の利点を得ることができます。

書き終えたら、戻ってきてGulp4のチュートリアルリンクをいくつか提供します。

25
Tristan Isfeld