質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

1569閲覧

なぜかgulpStylelintが反応しません

fuhixx

総合スコア22

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/06/30 02:13

編集2020/06/30 02:53

反応しなく、エラーなども出力されません。無視されている感じです。

関係ないかもしれませんが、試したことは以下です
・インストールし直し(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'));

どうかよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

>>・また、この記事の方法で、npmscriptsで実際に処理を成功することはできました。なので、どのような処理になるのかは確認できています。
ですが、どうしてもgulpfileで実行したいです。ややこしいからです。

stylelintが反応していてnpmに結果が出力されており、整形されないのはPretiierがないからでした。
「stylelintの処理がscssの整形もしてくれるもの」だと思ってました。(先ほどの記事は整形されたので)すみません。

投稿2020/06/30 08:47

fuhixx

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問