前提・実現したいこと
私はgulp初心者です。scssにコードを追加し、sourcetreeでプッシュ>yarnを実行すると、突然下記のエラーが出てくるようになりました。ビルドが出来るようにエラーを解消したく、どうぞ宜しくお願いします。
発生している問題・エラーメッセージ
CssSyntaxErrorが原因で'build' erroredとなっているのでしょうか。
[22:17:30] Starting 'css'... [22:17:32] 'css' errored after 1.25 s [22:17:32] CssSyntaxError in plugin 'gulp-cssnext' //中略 [22:17:32] 'build' errored after 1.67 s error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
各バージョンです。
node -v v8.16.0 gulp -v CLI version: 2.3.0 Local version: 4.0.2 npm -v 6.14.13 yarn -v 1.22.10
試したこと
yarn とgulp のupgrade や、yarnのキャッシュをクリアするなど試すも効果なしでした。
そうしているうちに余計ややこしいことになって行ってるような気がしてきました。
scssにコードを追加しなければエラーなし、追加するとエラーになります。
補足情報(FW/ツールのバージョンなど)
cssnextというプラグインが原因となっているようですので、その記述があるcss.js を共有します。
/*------------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------------*/ import gulp from 'gulp'; import gutil from 'gulp-util'; import sass from 'gulp-sass'; import sassGlob from 'gulp-sass-glob'; import cssnext from 'gulp-cssnext'; import setting from '../setting/css.js'; const destSourceMaps = gutil.env.release ? false : true; /*------------------------------------------------------------------ task ------------------------------------------------------------------*/ gulp.task('css', function() { return gulp.src(setting.src, { sourcemaps: destSourceMaps }) .pipe(sassGlob()) .pipe(sass(setting.sass) .on('error', sass.logError)) .pipe(cssnext(setting.cssnext)) .pipe(gulp.dest(setting.dest, { sourcemaps: './' })) ; });
こちらはgulpfile.babel.jsです。
import requireDir from 'require-dir'; /*------------------------------------------------------------------ tools ------------------------------------------------------------------*/ requireDir('./gulp/tools', { recurse : true }); /*------------------------------------------------------------------ tasks ------------------------------------------------------------------*/ requireDir('./gulp/tasks', { recurse : true }); /*------------------------------------------------------------------ build ------------------------------------------------------------------*/ require('./gulp/build'); require('./gulp/default');
こちらはpackage.jsonです。
{ "devDependencies": { "@babel/core": "^7.5.5", "@babel/polyfill": "^7.4.4", "@babel/preset-env": "^7.5.5", "@babel/register": "^7.5.5", "babel-loader": "^8.0.6", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "browser-sync": "^2.26.7", "chai": "^4.2.0", "flickity": "^2.2.1", "gulp": "^4.0.2", "gulp-consolidate": "^0.2.0", "gulp-cssnext": "^1.0.1", "gulp-iconfont": "^10.0.3", "gulp-imagemin": "^6.0.0", "gulp-jshint": "^2.1.0", "gulp-jsvalidate": "^4.0.0", "gulp-nunjucks-render": "^2.2.3", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-sass-glob": "^1.1.0", "gulp-scss-lint": "^1.0.0", "gulp-util": "^3.0.8", "gulp.spritesmith": "^6.10.1", "imagemin-gifsicle": "^6.0.1", "imagemin-mozjpeg": "^8.0.0", "imagemin-pngquant": "^8.0.0", "imagemin-svgo": "^7.0.0", "jquery": "^3.4.1", "jshint": "^2.10.2", "jshint-stylish": "^2.2.1", "lodash": "^4.17.15", "mocha": "^6.2.0", "modularized-normalize-scss": "^4.0.0", "picturefill": "^3.0.3", "require-dir": "^1.2.0", "vanilla-lazyload": "^12.0.0", "webpack": "^4.38.0", "webpack-stream": "^5.2.1" }, "private": true, "scripts": { "start": "nf start", "test": "./node_modules/.bin/mocha", "postinstall": "gulp build" }, "dependencies": { "foreman": "^3.0.1", "serve": "^11.1.0", "smooth-scroll": "^16.1.0" }, "cacheDirectories": [ "bower_components", "node_modules" ] }
あなたの回答
tips
プレビュー