0

Gulpタスクの問題に何時間も苦労しています。私はそれを機能させる方法を理解できませんでした。

最初に私のプロジェクト構造を示しましょう:

project/
|
|-- Gulp/
|   |-- Base/
|       |-- start-server.js
|       |-- sass.js
|           ...
|   |-- Watch/
|       |-- watch-sass.js
|           ...
|   |-- config.js
|       ...
|-- gulpfile.js
|   ...

また、この構造で言及されている各ファイルのコードを示します。 gulpfile.js

/*jslint node: true */
"use strict";

var requireDir    = require('require-dir'); // Node module to require whole directories

// ***** Require all tasks from Gulp folder *****
requireDir('./Gulp', {
  recurse: true
});

Gulp/ config.js

module.exports = {
  paths: {
    Project: {
      dir:            './',
      src:            './www',
      dist:           './dist'
    },

    HTML: {
      all:            './www/Views/**/**/*.html',
      dir:            './www/Views',
      entry:          './www/Views/index.html'
    },

    Sass: {
      all:            './www/StyleSheets/Sass/**/**/*.scss',
      dir:            './www/StyleSheets/Sass',
      entry:          './www/StyleSheets/Sass/main.scss',
      map:            '../../../dist/maps/sass',
      vendor:         './www/StyleSheets/Sass/Vendor/**/*.scss'
    },

    CSS: {
      all:            './www/StyleSheets/CSS/**/**/*.css',
      dir:            './www/StyleSheets/CSS',
      entry:          './www/StyleSheets/CSS/main.css',
      map:            '../../../dist/maps/css',
      vendor:         './www/StyleSheets/CSS/Vendor/**/*.css'
    },

    JS: {
      all:            './www/JavaScripts/**/**/*.js',
      dir:            './www/JavaScripts',
      entry:          './www/JavaScripts/app.js',
      map:            '../../../dist/maps/js',
      vendor:         './www/JavaScripts/Vendor/**/*.js'
    },
    // ...
  }
};

Gulp /Base/ auto-reload.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync').create();
// ***END*** IMPORTS ***END***

// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
  browserSync.init({
    server: {
      baseDir: config.paths.Project.dir
    },
    open: true
  });
});

Gulp /Base/ sass.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var sass          = require('gulp-sass'),
    browserSync   = require('browser-sync'),
    notify        = require('gulp-notify'),
    sourceMaps    = require('gulp-sourcemaps');
// ***END*** IMPORTS ***END***

// ***** Sass compiler *****
gulp.task('sass', function () {
  return gulp.src(config.paths.Sass.all)
    .pipe(sourceMaps.init())
    .pipe(sass({
      style: 'compressed'
    }))
    .on("error", notify.onError(function (error) {
      return "Error: " + error.message;
    }))
    .pipe(sourceMaps.write(config.paths.Sass.map))
    .pipe(gulp.dest(config.paths.CSS.dir))
    .pipe(browserSync.reload({
      stream: true
    }));
});

Gulp /Watch/ watch-sass.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync'),
    runSequence   = require('run-sequence');
// ***END*** IMPORTS ***END***

// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['start-server'], function () {
  gulp.watch(config.paths.Sass.all, ['sass', browserSync.reload]);
});

問題の説明:

最後のファイル Gulp/Watch/ watch-sass.js では、関数 browserSync.reloadが機能しません。タスク「watch-sass」、「start-server」、「sass」が機能しており、問題なく実行されます。ただし、 *.scss ファイルのコンパイルが終了した後、 browserSync.reload を使用してページが自動更新されず、その理由がわかりません。誰でも私を助けることができますか？

4

2 に答える 2

0

gulp task ' start-server ' を自分のファイルに分けるのではなく ' watch-sass.js ' ファイルに入れると動作することがわかりました。

watch-sass.jsのコードは次のようになります。

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync').create(),
    runSequence   = require('run-sequence');
// ***END*** IMPORTS ***END***

// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
  browserSync.init({
    server: {
      baseDir: config.paths.Project.dir
    },
    open: true
  });
});

// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['start-server'], function () {
  gulp.watch(config.paths.Sass.all, function () {
    runSequence(
      'sass',
      'useref-css',
      'move-index',
      browserSync.reload
    );
  });
});

関数 browserSync.reload が機能します。少なくともこの方法では。「start-server」タスクを別のファイルに入れたかったのですが、その方法がわかりません。

したがって、この方法に基づいて、JS ファイルに対して同様のことを行いたいと考えました。タスクとファイルに「watch-js.js」という名前を付けました。コードはほとんど同じで、runSequence の構成パスとタスクが異なるだけです。 ウォッチ-js.js

var gulp          = require('gulp'),
    config        = require('../config');

// ********* IMPORTS *********
var browserSync   = require('browser-sync').create(),
    runSequence   = require('run-sequence');
// ***END*** IMPORTS ***END***

// ***** Start server on localhost for live preview *****
gulp.task('start-server', function () {
  browserSync.init({
    server: {
      baseDir: config.paths.Project.dir
    },
    open: true
  });
});

// ***** Gulp watch JS files *****
gulp.task('watch-js', ['start-server'], function () {
  gulp.watch(config.paths.JS.all, function () {
    runSequence(
      'useref-js',
      'move-index',
      browserSync.reload
    );
  });
});

ああ、ここで驚きです。関数browserSync.reload が実行されていないのと同じ方法を使用して、このタスクを実行します。私はそれが動作するウォッチサスと同じように動作することを除いて. 私は今本当に迷っています。経験豊富な人なら、私が間違っていることを教えてくれますか?

于 2016-10-15T13:19:31.563 に答える
0

私はgulpには少し慣れていませんが、gulp-watchがインストールまたはインポートされていないようです。インストール/インポートします。

var watch = require("gulp-watch");

次に、gulp.watch を watch に置き換えます。

// ***** Gulp watch Sass files *****
gulp.task('watch-sass', ['auto-reload'], function () {
    watch(config.paths.Sass.all, ['sass'], function() {
        browserSync.reload();
    });
});

上記でない場合は、コードをここにある私の gulp ファイルと比較できます: https://github.com/FunkSoulNinja/travel-site

于 2016-10-15T01:57:00.077 に答える