Gulpでscssのコンパイルができません

質問への追記・修正の依頼

• 

  gouf

  2019/10/07 14:50

  > This usually happens because your environment has changed since running `npm install`
  npm install の再実行をしても変化は見られませんか?

  > This usually happens because your environment has changed since running `npm install` npm install の再実行をしても変化は見られませんか?

  キャンセル

  完了する
• 

  nyoro

  2019/10/17 12:19

  goufさん
  返信が遅くなってしまい、大変申し訳ございません。
  npm installを実行したのですが、
  
  C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test>npm install
  npm WARN rollback Rolling back readable-stream@2.3.6 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\ ★★★\OneDrive\デスクトップ\物置小屋\gulp-test\node_modules\fsevents\node_modules'
  npm WARN gulp-test@1.0.0 No description
  npm WARN gulp-test@1.0.0 No repository field.
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  
  audited 7054 packages in 2.325s
  found 0 vulnerabilities
  
  と表示されてしまい、再度npx gulpを実行してもダメでした。。

  goufさん 返信が遅くなってしまい、大変申し訳ございません。 npm installを実行したのですが、 C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test>npm install npm WARN rollback Rolling back readable-stream@2.3.6 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\ ★★★\OneDrive\デスクトップ\物置小屋\gulp-test\node_modules\fsevents\node_modules' npm WARN gulp-test@1.0.0 No description npm WARN gulp-test@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) audited 7054 packages in 2.325s found 0 vulnerabilities と表示されてしまい、再度npx gulpを実行してもダメでした。。

  キャンセル

  完了する
• 

  s8_chu

  2019/10/21 06:17 編集

  現状のディレクトリ構造、質問者さんが記述した各ファイルの内容と、質問者さんの使用している Node.js のバージョンを質問文に追記していただけませんか？

  現状のディレクトリ構造、質問者さんが記述した各ファイルの内容と、質問者さんの使用している Node.js のバージョンを質問文に追記していただけませんか？

  キャンセル

  完了する
• 

  nyoro

  2019/10/30 11:25

  s8_chuさん
  返信が遅くなってしまい、すみません。。
  
  ・現状のディレクトリ構造
  C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test
  この階層に下記の画像のように、ファイル、フォルダを置いています。
  https://ics.media/entry/3290/images/170823_gulp_macos_finder__960.png
  
  ・記述した各ファイルの内容
  gulpfile.jsにサイトで紹介されているソースをコピペしました
  
  // gulpプラグインの読み込み
  const gulp = require("gulp");
  // Sassをコンパイルするプラグインの読み込み
  const sass = require("gulp-sass");
  
  // style.scssをタスクを作成する
  gulp.task("default", function() {
  // style.scssファイルを取得
  return (
  gulp
  .src("css/style.scss")
  // Sassのコンパイルを実行
  .pipe(sass())
  // cssフォルダー以下に保存
  .pipe(gulp.dest("css"))
  );
  });
  
  当然cssフォルダ内にstyle.scssは入っています。
  style.scssの記述は以下のようになっています。
  
  // ネストのテスト
  div {
  p {
  font-weight: bold;
  }
  }
  
  // 変数のテスト
  $fontColor: #525252;
  
  h1 {
  color: $fontColor;
  }
  
  ・Node.js のバージョン
  windowsにインストールされているNode.jsを開くと、Welcome to Node.js v12.11.1.と表示されるので、恐らくv12.11.1だと思います。
  
  返信が遅くなってしまい大変恐縮なのですが、よろしければご教授いただけますと幸いです。
  宜しくお願い致します。

  s8_chuさん 返信が遅くなってしまい、すみません。。 ・現状のディレクトリ構造 C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test この階層に下記の画像のように、ファイル、フォルダを置いています。 https://ics.media/entry/3290/images/170823_gulp_macos_finder__960.png ・記述した各ファイルの内容 gulpfile.jsにサイトで紹介されているソースをコピペしました // gulpプラグインの読み込み const gulp = require("gulp"); // Sassをコンパイルするプラグインの読み込み const sass = require("gulp-sass"); // style.scssをタスクを作成する gulp.task("default", function() { // style.scssファイルを取得 return ( gulp .src("css/style.scss") // Sassのコンパイルを実行 .pipe(sass()) // cssフォルダー以下に保存 .pipe(gulp.dest("css")) ); }); 当然cssフォルダ内にstyle.scssは入っています。 style.scssの記述は以下のようになっています。 // ネストのテスト div { p { font-weight: bold; } } // 変数のテスト $fontColor: #525252; h1 { color: $fontColor; } ・Node.js のバージョン windowsにインストールされているNode.jsを開くと、Welcome to Node.js v12.11.1.と表示されるので、恐らくv12.11.1だと思います。 返信が遅くなってしまい大変恐縮なのですが、よろしければご教授いただけますと幸いです。 宜しくお願い致します。

  キャンセル

  完了する