#browsersync

GET PreviewBot – Instantly preview edits on any device – WPCroc.com

[ad_1]

DOWNLOAD FOR FREE

LIVE PREVIEWBUY FOR $9

PreviewBot – do it faster and with a smile

Your web project should be ready tomorrow morning and you haven’t even started designing it? If so, we can network and create a tool for you, which greatly increases your chances of delivering on time:PreviewBot. Don’t believe us? Just give it a try using our preview / test page (first click the…

開発日記はすごく久しぶり！な安正です。 今日はUdemyで購入した講座を進めました。

https://www.udemy.com/share/10256qAEITcVpXQHgH/

公開された日より数年が経っているので講座通りに進めると詰まってしまったりします。 今回詰まって解消したことを覚えているうちに記入します。

動画では　npm init　をターミナルで入力してから　npm i gulp -g　とのことだったのですが自分の環境がwindowsだからなのかエラーで gulp のダウンロードができませんでした。 npm install　をしてからなら無事ダウンロードをすることができました。

次に gulp と　Browsersync　(ローカルサーバーとブラウザの自動リロードをするためのパッケージ）の紐づけについて　gulp　とターミナルで打ち込んだ時サーバーが立ち上がらずエラーが！ これはどうやらglupのバージョンがv4になり仕様が変わってしまったことによるエラーだったようです。

参考：https://satoyan419.com/gulp-v4/

動画では gulpfile.js に

gulp.task('default',['browser-sync']);

と記入する流れだったのですがエラーがでます。

gulp.task('default',gulp.series( gulp.parallel('browser-sync')));

に書き直したら無事立ち上がりました～嬉しかったな！ その後の　wacth　の追加も

gulp.task('default',gulp.series( gulp.parallel('browser-sync', 'watch'))); 

で問題なく動作しました。

Time-saving synchronised browser testing.

It’s wicked-fast and totally free.

npm install -g browser-sync 

then in src folder

 browser-sync start --server --files "*/**, *.*"

or

My folder structure is as follows:

index.html css - styles.css sass - categories - sass partial(s) - styles.scss gulpfile.js package.json

This task is for running sass and browsersync with gulp: Goes into gulpfile.js

// gulp var gulp = require('gulp'); // sass var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); // browsersync var browserSync = require('browser-sync'); var reload = browserSync.reload; // define browsersync task gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "." } }); }); // define browser reload task gulp.task('bs-reload', function () { browserSync.reload(); }); // // define styles task gulp.task('styles', function () { gulp.src('sass/**/*.scss') // compile SASS to CSS .pipe(sass({ outputStyle: 'compressed', includePaths: ['node_modules/susy/sass'] }).on('error', sass.logError)) // add vendor prefixes .pipe(autoprefixer({ browsers: ['last 30 versions'], cascade: false })) // save the file to the css directory .pipe(gulp.dest('css')) // send output to all browsers .pipe(browserSync.stream()); }); // run tasks: type gulp in browser gulp.task('default', ['browser-sync'], function(){ gulp.watch("sass/**/*.scss", ['styles']); gulp.watch("*.html", ['bs-reload']); });