反応しなく、エラーなども出力されません。無視されている感じです。
関係ないかもしれませんが、試したことは以下です
・インストールし直し(Node.js、gulpのプラグイン)
・キャッシュクリア
・[この記事](11:47 山本 楓人 https://www.google.co.jp/amp/s/www.tam-tam.co.jp/tipsnote/html_css/post15457.html/amp)の方法を試す−1
・この記事の方法を試す−2
・また、この記事の方法で、npmscriptsで実際に処理を成功することはできました。なので、どのような処理になるのかは確認できています。
ですが、どうしてもgulpfileで実行したいです。ややこしいからです。
該当部分は以下です↓
gulpfileJS
1task('sass', function () { 2 return ( 3 src(paths.cssSrc) 4 // .pipe(cssbeautify(cssoptions)) 5 .pipe(gulpStylelint({ 6 fix: true 7 })) 8 .pipe( 9 plumber({ 10 errorHandler: notify.onError({ 11 title: "sass Error!", 12 message: "<%= error.message %>", 13 sound: 'Glass',}) 14 }) 15 ) 16 // glob追加 17 .pipe(glob()) 18 // 追加終了 19 .pipe(sass({ 20 // Minifyするなら'compressed' 21 outputStyle: 'expanded' 22 })) 23 .pipe(autoprefixer()) 24 .pipe(dest(paths.cssDist)) 25 // notifyでコンパイル成功通知 26 .pipe( 27 notify({ 28 title: 'Task running Gulp', 29 message: 'sass file compiled.', 30 sound: 'Tink',}) 31 ) 32 // notifyでコンパイル成功通知 終了 33 ); 34}); 35
全体のgulpfile.jsは以下です↓
gulpfileJS
1const gulp = require('gulp'); 2const notify = require("gulp-notify"); 3const plumber = require("gulp-plumber"); 4const sass = require('gulp-sass'); 5// glob追加 6const glob = require("gulp-sass-glob"); 7// glob追加終了 8// beautify 追加 9const htmlbeautify = require("gulp-html-beautify"); 10// const cssbeautify = require('gulp-cssbeautify'); 11// beautify 追加終了 12// stylelint 追加 13const stylelint = require('stylelint'); 14const gulpStylelint = require('gulp-stylelint'); 15// stylelint 追加終了 16// const pug = require('gulp-pug'); 17const autoprefixer = require('gulp-autoprefixer'); 18const uglify = require('gulp-uglify'); 19const browserSync = require('browser-sync'); 20 21//setting : paths 22const paths = { 23 'root' : './dist/', 24 'pug' : './src/pug/**/*.pug', 25 'html' : './dist/**/*.html', 26 'cssSrc' : './src/scss/**/*.scss', 27 'cssDist' : './dist/css/', 28 'jsSrc' : './src/js/**/*.js', 29 'jsDist': './dist/js/' 30} 31 32// setting : htmlbeautify 33const htmloptions = { 34 indent_char: '', 35 indent_size: 1, 36 unformatted: ['textarea', 'p', 'pre', 'span', 'a', 'h1', 'h2', 'h3'], 37 indent_with_tabs: true, 38 max_preserve_newlines: 0, 39 wrap_attributes: false, 40 wrap_attributes_indent_size: 0, 41} 42// setting : cssbeautify 43// const cssoptions = { 44// indent_char: '', 45// indent_size: 1, 46// max_preserve_newlines: 0, 47// wrap_attributes: false, 48// wrap_attributes_indent_size: 0, 49// } 50 51//gulpコマンドの省略 52const { watch, series, task, src, dest, parallel } = require('gulp'); 53 54//HTML 55task('html', function () { 56 return ( 57 src(paths.html) 58 // .pipe( 59 // plumber({ 60 // errorHandler: notify.onError({ 61 // title: "html Error!", 62 // message: "<%= error.message %>", 63 // sound: 'Glass',}) 64 // }) 65 // ) 66 .pipe(htmlbeautify(htmloptions)) 67 .pipe(dest(paths.root)) 68 // .pipe( 69 // notify({ 70 // title: 'Task running Gulp', 71 // message: 'html file compiled.', 72 // sound: 'Tink',}) 73 // ) 74 ); 75}); 76 77//Sass 78task('sass', function () { 79 return ( 80 src(paths.cssSrc) 81 // .pipe(cssbeautify(cssoptions)) 82 .pipe(gulpStylelint({ 83 fix: true 84 })) 85 .pipe( 86 plumber({ 87 errorHandler: notify.onError({ 88 title: "sass Error!", 89 message: "<%= error.message %>", 90 sound: 'Glass',}) 91 }) 92 ) 93 // glob追加 94 .pipe(glob()) 95 // 追加終了 96 .pipe(sass({ 97 // Minifyするなら'compressed' 98 outputStyle: 'expanded' 99 })) 100 .pipe(autoprefixer()) 101 .pipe(dest(paths.cssDist)) 102 // notifyでコンパイル成功通知 103 .pipe( 104 notify({ 105 title: 'Task running Gulp', 106 message: 'sass file compiled.', 107 sound: 'Tink',}) 108 ) 109 // notifyでコンパイル成功通知 終了 110 ); 111}); 112 113//JS Compress 114task('js', function () { 115 return ( 116 src(paths.jsSrc) 117 .pipe(plumber()) 118 .pipe(uglify()) 119 .pipe(dest(paths.jsDist)) 120 ); 121}); 122 123// browser-sync 124task('browser-sync', () => { 125 return browserSync.init({ 126 server: { 127 baseDir: paths.root 128 }, 129 port: 8080, 130 reloadOnRestart: true 131 }); 132}); 133 134// browser-sync reload 135task('reload', (done) => { 136 browserSync.reload(); 137 done(); 138}); 139 140//watch 141task('watch', (done) => { 142 watch([paths.html], series('html', 'reload')); 143 watch([paths.cssSrc], series('sass', 'reload')); 144 watch([paths.jsSrc], series('js', 'reload')); 145 done(); 146}); 147task('default', parallel('watch', 'browser-sync'));
どうかよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。