前提・実現したいこと
gulpとbrowser-syncを使ってブラウザの自動更新を行いたいです。
発生している問題・エラーメッセージ
gulpを実行したときは、とくにエラーメッセージは表示されない(以下の結果)のですが、本来ならばローカルホストのURLがここに表示され、ブラウザが自動で立ち上がるはずですが何も起きません。
[13:17:12] Using gulpfile ~\Desktop\project\02_portfolio\html\gulpfile.js [13:17:12] Starting 'default'... [13:17:12] Starting 'sass'... [13:17:12] Finished 'sass' after 180 ms [13:17:12] Starting 'js'... [13:17:12] Finished 'js' after 9.42 ms [13:17:12] Starting 'browser-reload'...
該当のソースコード
const gulp = require('gulp'); const sass = require('gulp-sass'); const notify = require("gulp-notify"); const plumber = require("gulp-plumber"); const autoprefixer = require('gulp-autoprefixer'); const uglify = require('gulp-uglify'); const changed = require('gulp-changed'); const browserSync = require('browser-sync').create(); const cleanCss = require('gulp-clean-css'); const sourcemaps = require('gulp-sourcemaps'); const glob = require('gulp-sass-glob'); const queries = require('gulp-group-css-media-queries'); const imagemin = require('gulp-imagemin'); const pngquant = require('imagemin-pngquant'); const mozjpeg = require('imagemin-mozjpeg'); //setting : paths const paths = { 'allDist': './01_up_file/dist/*', 'scss' : './src/scss/', 'css' : './01_up_file/dist/css/', 'jsSrc' : './src/js/', 'jsDist' : './01_up_file/dist/js/', 'img' : './01_up_file/dist/img/' } //setting : Sass Options const sassOptions = { outputStyle: 'compressed' } //gulpコマンドの省略 const { watch, series, task, src, dest } = require('gulp'); //Sass task('sass', function () { return ( src(paths.scss + '**/*.scss') .pipe(plumber({ errorHandler: notify.onError({ title: "Sassエラー発見!", message: "<%= error.message %>" }) })) .pipe(sourcemaps.init()) .pipe(sass(sassOptions)) .pipe(cleanCss()) .pipe(glob()) .pipe(queries()) .pipe(autoprefixer()) .pipe(sourcemaps.write()) .pipe(changed(paths.allDist)) .pipe(dest(paths.css)) .pipe(browserSync.stream()) ); }); //JS Compress task('js', function () { return ( src(paths.jsSrc + '**/*.js') .pipe(plumber({ errorHandler: notify.onError({ title: "JavaScriptエラー発見!", message: "<%= error.message %>" }) })) .pipe(uglify()) .pipe(dest(paths.jsDist)) ); }); //jpg,png,svg,gif Compress task('imagemin', function () { return ( src(paths.img + '**/*.{jpg,jpeg,png,gif,svg}') .pipe(imagemin( [ pngquant({ quality: '65-80', speed: 1 }), mozjpeg({ quality: 80 }), imagemin.svgo(), imagemin.gifsicle() ] )) .pipe(gulp.dest('img/min')) ); }); //browser auto reload task('server', function() { return ( browserSync.init({ server: { baseDir: './01_up_file/', } }) ); }); task('browser-reload', function () { return ( browserSync.reload() ); }); //watch watch([paths.scss + '**/*.scss'], task('sass')); watch([paths.jsSrc + '**/*.js'], task('js')); watch(['./01_up_file/**/*'], task('browser-reload')); task('default', series('sass', 'js','browser-reload'));
試したこと
公式の通り以下も試してみましたが結果は同じでした。
task('server', function() {
↓
task('browser-sync', function() {
補足情報(FW/ツールのバージョンなど)
package.jsonはこんな感じです。
{
"name": "html",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-changed": "^4.0.0",
"gulp-clean-css": "^4.2.0",
"gulp-group-css-media-queries": "^1.2.2",
"gulp-imagemin": "^6.0.0",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^4.0.2",
"gulp-sass-glob": "^1.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-pngquant": "^8.0.0"
}
}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/11 21:45