1

これらの便利で人気のあるプラグインで gulp を使用する方法を理解しようとしています。私が持っているものがあります：

  • localhost:8000で go(lang) サーバーを実行しました
  • サーバーがページを形成するために使用するappフォルダーの下の静的/ローカル html ファイル
  • css に変換され、自動接頭辞が付けられる、同じディレクトリの下の scss ファイル

ここに私のgulpfile.jsがあります：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    autoprefixer = require('gulp-autoprefixer'),
    livereload = require('gulp-livereload');

// "./" - it's "app" directory
gulp.task('default', function() {
    return gulp.src('./*.scss')
        .pipe(watch('./*.scss'))
        .pipe(sass())
        .pipe(autoprefixer('> 5%'))
        .pipe(gulp.dest('./'));
});

だから私が必要なもの：

  • html、css/scss ファイルの変更を監視し、localhost:8000 (chrome の開いているタブ)でリロードします。
  • 使用する必要がない場合は素晴らしいでしょう：
    • livereload chrome プラグイン
    • expressjs フレームワーク
  • サーバーなしでファイルのように直接開いた場合、htmlページをリロードします

gulp-embedlrとgulp -webserverを使用してこれを実現できることを読みました。もしそうなら、それを行う方法は？

4

1 に答える 1

1

わかりました、私が見つけた最善の解決策は、Gulp + BrowserSync を使用することです! それは素晴らしい解決策です。

これが私のgulpfile.jsのコードです:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

gulp.task('browserSync', function() {
    browserSync({
        //logConnections: false,
        //logFileChanges: false,
        notify: false,
        open: false,
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('sass', function() {
    return gulp.src('./css/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass())
        .pipe(autoprefixer('> 5%'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./css'))
        .pipe(reload({stream:true}));
});

gulp.task('watch', function() {
    gulp.watch('./css/*.scss', ['sass']);
    gulp.watch('./*.html', reload);
});

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

上記のコードを説明する意味はありません。これを読んでください：http://www.browsersync.io/docs/gulp/

于 2015-02-01T18:51:00.037 に答える