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

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

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

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

コンパイル

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

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

Q&A

0回答

733閲覧

sassからcssへのgulpを使ってのコンパイル

rikukajiya

総合スコア0

npm

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

コンパイル

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

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

0グッド

0クリップ

投稿2021/10/18 15:50

gulp sassやgulp sass:watchをコマンドプロンプトで実行しようとしたら

C:\Users\rikup\OneDrive\ドキュメント\sintest.sass>gulp sass Error: Cannot find module 'gulp-sass-glob' Require stack: - C:\Users\rikup\OneDrive\ドキュメント\sintest.sass\gulpfile.js - C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js - C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^4.0.0\index.js - C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\index.js - C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15) at Function.Module._load (internal/modules/cjs/loader.js:745:27) at Module.require (internal/modules/cjs/loader.js:961:19) at require (internal/modules/cjs/helpers.js:92:18) at Object.<anonymous> (C:\Users\rikup\OneDrive\ドキュメント\sintest.sass\gulpfile.js:5:16) at Module._compile (internal/modules/cjs/loader.js:1072:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:961:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\rikup\OneDrive\ドキュメント\sintest.sass\gulpfile.js', 'C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js', 'C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js', 'C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\index.js', 'C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js' ] }

こんな文が出てきてcssにコンパイルされないです
最近gulpを使いました 最初はこんなことにはならず正常でした
ヘルプ

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

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

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

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

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

miyabi_takatsuk

2021/10/18 16:36

何点か。 gulp-sass-globパッケージはインストールしていますか? エラーは、上記パッケージが無い、というエラーです。 > 最近gulpを使いました 最初はこんなことにはならず正常でした いつまでできていましたか? また、Gulp、NodeJS、npmなど、使用しているツール、パッケージのアップデートを行ったりしませんでしたか? 最後に、 gulpfile.jsのソースコードを、質問本文に記載してください。
rikukajiya

2021/10/19 09:51 編集

gulp-sass-globがグローバルだと思っていたので入れなおしました 新しいコマンドプロンプトの実行結果を載せます C:\Users\rikup\OneDrive\ドキュメント\sintest.sass>gulp sass ReferenceError: repuire is not defined at Object.<anonymous> (C:\Users\rikup\OneDrive\ドキュメント\sintest.sass\gulpfile.js:7:15) at Module._compile (internal/modules/cjs/loader.js:1072:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:961:19) at require (internal/modules/cjs/helpers.js:92:18) at requireOrImport (C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) at execute (C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:37:3) at Liftoff.handleArguments (C:\Users\rikup\AppData\Roaming\npm\node_modules\gulp-cli\index.js:211:24)
rikukajiya

2021/10/19 10:34

vscodeの拡張機能のlive sass compilerを使おうとしたあたりです(cssフォルダだけ作成されてcssファイルは作れなく失敗で終わりましたが) アップデートは特に行ってないです 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass')(require('sass')); var sassGlob = require('gulp-sass-glob'); var sourcemaps = require('gulp-sourcemaps'); var plumber = repuire('gulp-plumber'); var notify = repuire('gulp-notify'); var postcss = repuire('gulp-postcss'); var autoprefixer = require('autoprefixer'); var assets = require('postcss-assets'); var cssdeclsort = require('css-declaration-sorter'); var mqpacker = require('css-mqpacker'); function buildStyles() { return gulp.src('./sass/**/*.scss') .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) .pipe(sourcemaps.init()) .pipe(sassGlob()) .pipe(sass({outputStyle: 'expanded'})) .pipe(sass().on('error', sass.logError))  .pipe(postcss([mqpacker()])) .pipe(postcss([cssdeclsort({order: 'smacss'})]))//プロパティを自動でソートしてくれる .pipe(postcss([assets({loadPaths: ['images/', './icons', './banners']/*[,relative: true]←相対パスにしたい場合これを追加 [,baseUrl: 'http://example.com/wp-content/themes/']←任意のurlにしたい時 relative trueが優先される*/})])) //.pipe(postcss([autoprefixer({browsers: ['last 1 versions, ie 10']})])) //last 1 versionsを指定  特定のブラウザの指定も可能 .pipe(sourcemaps.write('./css')) .pipe(gulp.dest('./css')); }; exports.buildStyles = buildStyles; exports.watch = function () { gulp.watch('./sass/**/*.scss', ['sass']); };
miyabi_takatsuk

2021/10/29 01:04

反応が遅れてすみません。 Gulpのソースコードも含めて、 質問本文に記載ください。 質問は編集できます。
miyabi_takatsuk

2021/10/29 01:08

もしかしたら、ローカル含め、パッケージが不足しているか、バージョンが足りないって、気がしますね・・・。 Nodeと付随してnpm自体のバージョンなど、 参考サイトを再度確認して、ご自身の環境と相違ないかにらめっこしてみてください。 ちなみに、 > var sass = require('gulp-sass')(require('sass')); の記載は最新の書き方のため、 特にパッケージなどのバージョンが重要となります。 (Gulpのバージョン含め最新にする必要がある)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問