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

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

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

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

Q&A

解決済

1回答

1291閲覧

gulpを使ってscssをコンパイルしたい

rrr_e

総合スコア3

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

0グッド

0クリップ

投稿2021/05/14 10:06

編集2021/05/14 12:51

前提・実現したいこと

gulpを用い、sassを保存すると、自動でcssにコンパイルされるようにしたいです。

発生している問題・エラーメッセージ

・style.scssを保存した時に、コンパイルされない。(style.cssに反映されない)
・style.scssを保存した時に、リロードはされます。
・ターミナルに以下エラーメッセージが出ています。
The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Object

該当のソースコード-gulpfile.js

js

1var PATH = "./"; 2 3const gulp = require("gulp"), 4 sass = require("gulp-sass"), 5 sassGlob = require( 'gulp-sass-glob' ), 6 concat = require('gulp-concat'), 7 sourcemaps = require("gulp-sourcemaps"), 8 autoprefixer = require("gulp-autoprefixer"), 9 browserSync = require('browser-sync').create(), 10 reload = browserSync.reload, 11 plumber = require("gulp-plumber"), 12 htmlhint = require("gulp-htmlhint"), 13 eslint = require("gulp-eslint"), 14 notify = require("gulp-notify"), 15 ejs = require("gulp-ejs"), 16 data = require('gulp-data'), 17 rename = require('gulp-rename'), 18 changed = require('gulp-changed'), 19 uglify = require('gulp-uglify'), 20 aigis = require("gulp-aigis"), 21 csscomb = require('gulp-csscomb'), 22 del = require('del'), 23 runSequence = require('run-sequence'), 24 cleancss = require('gulp-clean-css'), 25 fs = require("fs"), 26 cmq = require('gulp-combine-media-queries'), 27 28 SRC = PATH + "src/", 29 DIST = PATH + "dist/"; 30 31require("es6-promise").polyfill(); 32 33 34//152行目をコメントアウトするやり方で --ok 35gulp.task('sass', function() { 36 return gulp.src(SRC + 'assets/sass/**/*.scss') 37 .pipe(sassGlob()) 38 .pipe( plumber({ errorHandler: notify.onError( 'Error: <%= error.message %>' ) }) ) 39 //.pipe(sourcemaps.init()) 40 .pipe(sass()) 41 .pipe(sourcemaps.write('/')) 42 .pipe(cmq()) 43 .pipe(csscomb()) 44 .pipe(autoprefixer()) 45 .pipe(gulp.dest(DIST + 'assets/css/')) 46}); 47 48//ejs --ok 49gulp.task('ejs', function() { 50 // var json = JSON.parse(fs.readFileSync(SRC + 'shop.json')); 51 // var json = JSON.parse(fs.readFileSync(SRC + 'template-ejs/meta.json')); 52 return gulp.src([SRC + '**/*.ejs','!' + SRC + 'assets/inc/**/_*.ejs']) 53 .pipe(plumber()) 54 // .pipe(ejs({json})) 55 .pipe(ejs()) 56 .pipe(data(function(file) { 57 return { 'filename': file.path } 58 })) 59 .pipe(ejs()) 60 .pipe(changed(SRC + '**/*.ejs')) 61 .pipe(rename({extname: '.html'})) 62 // .pipe(rename({extname: '.php'})) 63 .pipe(gulp.dest(DIST)) 64}); 65 66 67//jsmin --okだけどdistには出てない 68gulp.task('jsmin',function(){ 69 return gulp.src(SRC + 'assets/js/*') // coffeeディレクトリ以下全てのファイルを指定 70 .pipe(plumber()) // エラーでwatchが止まらないように 71 .pipe(concat('script.js')) // 一つのファイルに結合する 72 .pipe(uglify()) // 圧縮する 73 .pipe(gulp.dest(SRC +'assets/js/min')); // jsディレクトリに書き出す 74}); 75 76gulp.task('js', function() { 77 return gulp.src(SRC + 'assets/js/min/*.js') 78 .pipe(changed(DIST + 'assets/js/')) 79 .pipe(gulp.dest(DIST + 'assets/js/')) 80}); 81 82//public_htmlに書き出す 83gulp.task('copy-src',function() { 84 return gulp.src([SRC + '**/*.+(jpg|jpeg|gif|png|svg|php|map|mp4|otf|ttf|woff|pdf|xlsx|zip)', SRC + 'layout/*.+(js|css)']) 85 .pipe(changed(DIST)) 86 .pipe(gulp.dest(DIST)) 87}); 88 89//watchで自動で書きだす --ok 90gulp.task('default', function() { 91 92 browserSync.init({ 93 server: { baseDir: DIST }, 94 port: 7878, 95 directoryListing: true 96 }); 97 gulp.watch(SRC + 'assets/sass/**/*.scss', gulp.task('sass')).on('change', reload); 98 gulp.watch(SRC + 'assets/js/**/*.js', gulp.task('js')).on('change', reload); 99 gulp.watch([SRC + 'assets/js/**/*.js','!' + SRC + 'assets/js/min/*.js'], gulp.task('jsmin')).on('change', reload); 100 gulp.watch(SRC + '**/*.ejs', gulp.task('ejs')).on('change', reload); 101 gulp.watch([SRC + '**/*.+(jpg|jpeg|gif|png|svg|php|map|mp4|otf|ttf|woff|pdf|xlsx|zip)', SRC + 'layout/*.+(js|css)', '!' + SRC + 'js/', '!' + SRC + 'css/'], gulp.task('copy-src')).on('change', reload); 102}); 103 104gulp.task("build-ejs", function() { 105 return gulp.src([SRC + '**/*.ejs','!' + SRC + 'assets/inc/_*.ejs']) 106 .pipe(ejs()) 107 .pipe(rename({extname: ".html"})) 108 .pipe(gulp.dest(DIST)) 109}); 110 111gulp.task('build-sass', function() { 112 return gulp.src(SRC + 'assets/sass/**/*scss') 113 .pipe(sass()) 114 .pipe(sourcemaps.write('/')) 115 .pipe(cmq()) 116 .pipe(csscomb()) 117 .pipe(autoprefixer()) 118 .pipe(gulp.dest(DIST + 'assets/css/')) 119}); 120 121gulp.task('build-js', function() { 122 return gulp.src(SRC + 'assets/js/min/*.js') 123 .pipe(gulp.dest(DIST + 'assets/js/')) 124}); 125 126gulp.task("build-copy", function() { 127 return gulp.src([SRC + '**/*.+(jpg|jpeg|gif|png|svg|php|map|mp4|otf|ttf|woff|pdf|xlsx|zip)']) 128 .pipe(gulp.dest(DIST)) 129}); 130 131gulp.task('clean', function() { 132 return del(DIST + '*'); 133}); 134 135/* 136 137gulp.task('build', function(done) { 138 runSequence( 139 'build-ejs', 140 'build-sass', 141 'build-js', 142 'build-copy', 143 done); 144}); 145 146*/ 147 148gulp.task('build', gulp.series( 149 gulp.series( 150 'build-ejs', 151 'build-sass', 152 'build-js', 153 'build-copy', 154 ) 155)); 156 157/* 158 159gulp.task('finish', function(done) { 160 runSequence( 161 'clean', 162 'build-ejs', 163 'build-sass', 164 'build-js', 165 'build-copy', 166 done); 167}); 168 169*/ 170 171gulp.task('finish', gulp.series( 172 gulp.parallel( 173 'clean', 174 'build-ejs', 175 'build-sass', 176 'build-js', 177 'build-copy', 178 ) 179)); 180

該当のソースコード-package.json

js

1{ 2 "name": "web-site01", 3 "version": "0.0.0", 4 "description": "", 5 "main": "gulpfile.js", 6 "dependencies": { 7 "browser-sync": "^2.18.8", 8 "gulp-aigis": "^1.3.0", 9 "gulp-autoprefixer": "^3.1.1", 10 "gulp-clean-css": "^3.9.4", 11 "gulp-combine-media-queries": "^0.2.0", 12 "gulp-concat": "^2.6.1", 13 "gulp-eslint": "~3.0.1", 14 "gulp-htmlhint": "~0.3.1", 15 "gulp-pleeease": "~2.0.2", 16 "gulp-plumber": "^1.2.0", 17 "gulp-ruby-sass": "~2.1.1", 18 "mocha": "^8.4.0" 19 }, 20 "devDependencies": { 21 "browser-sync": "~2.18.8", 22 "del": "^3.0.0", 23 "es6-promise": "~4.1.0", 24 "gulp": "^4.0.2", 25 "gulp-changed": "~2.0.0", 26 "gulp-csscomb": "~3.0.8", 27 "gulp-data": "^1.2.1", 28 "gulp-ejs": "^2.3.0", 29 "gulp-notify": "~3.0.0", 30 "gulp-rename": "^1.2.3", 31 "gulp-ruby-sass": "~2.1.1", 32 "gulp-sass": "^4.1.0", 33 "gulp-sass-glob": "^1.1.0", 34 "gulp-sourcemaps": "~2.5.0", 35 "gulp-uglify": "~2.1.2", 36 "run-sequence": "^2.2.1" 37 }, 38 "scripts": { 39 "test": "echo \"Error: no test specified\" && exit 1" 40 }, 41 "author": "", 42 "license": "ISC" 43} 44

フォルダ構成

イメージ説明

試したこと

以下の記事内容を一通り試しました。
https://qiita.com/ogss34/items/eeed9193ec29ee605d68

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

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

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

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

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

guest

回答1

0

自己解決

node_modulues/gulp-combine-media-queries/index.jsの152行目をコメントアウトしたら解決できました。

JS

1//中略 2 3 file.contents = new Buffer(cssJson); //←ここをコメントアウト 4 5//中略

投稿2021/05/14 13:05

rrr_e

総合スコア3

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問