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

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

ただいまの
回答率

88.37%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 793

nyoro

score 16

Gulpでscssのコンパイルをしたいです。

https://ics.media/entry/3290/
このサイトを見ながら、Gulpの導入からscssのコンパイルについて学んでいたのですが、タスクの実行でつまづいてしまいました。
コマンドプロンプトでnpx gulpと入力してもコンパイルされずに、エラーメッセージが出てしまいます。

エラーメッセージ(ユーザー名は★★★で隠しています)

C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test>npx gulp
C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test\node_modules\node-sass\lib\binding.js:15
      throw new Error(errors.missingBinary());
      ^

Error: Missing binding C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test\node_modules\node-sass\vendor\win32-x64-72\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 12.x

Found bindings for the following environments:
  - Windows 64-bit with Node.js 10.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
    at module.exports (C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test\node_modules\node-sass\lib\binding.js:15:13)
    at Object.<anonymous> (C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:962:10)
    at Module.load (internal/modules/cjs/loader.js:798:32)
    at Function.Module._load (internal/modules/cjs/loader.js:711:12)
    at Module.require (internal/modules/cjs/loader.js:838:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test\node_modules\gulp-sass\index.js:162:21)
    at Module._compile (internal/modules/cjs/loader.js:945:30)

試したこと

https://dev.classmethod.jp/node-js/node-sass-could-not-find-a-binding/
このサイトを見て紹介されているコマンドを入力しましたが、ダメでした。

コマンドを実行するディレクトリに間違いはないはずです。
最初に紹介したページに書いてあるgulpのインストール等で必要なファイル、フォルダは全て
C:\Users\★★★\OneDrive\デスクトップ\物置小屋\gulp-test
の階層に揃っています。何が原因なのでしょうか。

Windowsの仕様

エディション Windows10 Pro
バージョン 1903

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

  • gouf

    2019/10/07 14:50

    > 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を実行してもダメでした。。

    キャンセル

  • s8_chu

    2019/10/21 06:17 編集

    現状のディレクトリ構造、質問者さんが記述した各ファイルの内容と、質問者さんの使用している 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だと思います。

    返信が遅くなってしまい大変恐縮なのですが、よろしければご教授いただけますと幸いです。
    宜しくお願い致します。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る