gulpを使ってのsassからcssへのコンパイルができない

Comments

1. 

   @dddddddddddd

   Questioner

   more_horiz

   英語読めません　日本語訳もわけわからん
2. 

   @dddddddddddd

   Questioner

   more_horiz

   そもそもgulp最近入れたし最初は使えてた
3. 

   @uasi

   more_horiz

   では npm install sass --save-dev を実行してください。 gulpfile.js の中に require('gulp-sass')); があれば require('gulp-sass')(require('sass')); に書き換えてください。
4. 

   @dddddddddddd

   Questioner

   more_horiz

   全部あります
   varかconstは重要ですか？
5. 

   @uasi

   more_horiz

   gulp をいつ入れたかは関係ありません。 gulp-sass のバージョンと gulpfile.js の内容が食い違うと起きる問題なので。
6. 

   @uasi

   more_horiz

   var か const かは関係ないです。まだ動かなければ gulpfile.js の中身を貼ってください。
7. 

   @dddddddddddd

   Questioner

   more_horiz

   ```
   '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']);
   };
   
   ```
8. 

   @uasi

   more_horiz

   書き換え方は合っているようですね。 sintest.sass フォルダの中で npm why gulp-sass sass を実行してその結果を貼ってもらえますか？以下のようになるはずです。
   
   gulp-sass@5.0.0
   node_modules/gulp-sass
   gulp-sass@"^5.0.0" from the root project
   
   sass@1.43.2
   node_modules/sass
   sass@"^1.43.2" from the root project
9. 

   @dddddddddddd

   Questioner

   more_horiz

   Usage: npm <command>
   
   where <command> is one of:
   access, adduser, audit, bin, bugs, c, cache, ci, cit,
   clean-install, clean-install-test, completion, config,
   create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
   edit, explore, fund, get, help, help-search, hook, i, init,
   install, install-ci-test, install-test, it, link, list, ln,
   login, logout, ls, org, outdated, owner, pack, ping, prefix,
   profile, prune, publish, rb, rebuild, repo, restart, root,
   run, run-script, s, se, search, set, shrinkwrap, star,
   stars, start, stop, t, team, test, token, tst, un,
   uninstall, unpublish, unstar, up, update, v, version, view,
   whoami
   
   npm <command> -h quick help on <command>
   npm -l display full usage info
   npm help <term> search for help on <term>
   npm help npm involved overview
   
   Specify configs in the ini-formatted file:
   C:\Users\rikup\.npmrc
   or on the command line via: npm <command> --key value
   Config info can be viewed via: npm help config
   
   npm@6.14.15 C:\Program Files\nodejs\node_modules\npm
   
10. 

    @uasi

    more_horiz

    ああすみません、 npm 6.14.15 だとまだ npm why コマンドが使えないようですね。
11. 

    @uasi

    more_horiz

    package.json の中に
    "gulp-sass": "^5.0.0"
    と
    "sass": "^1.43.2"
    は存在しますか？バージョン番号は多少違ってもいいですが両方存在する必要があります。
12. 

    @dddddddddddd

    Questioner

    more_horiz

    {
    "name": "test_profect",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "css-declaration-sorter": "^6.1.3",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-sass": "^5.0.0",
    "postcss-assets": "^6.0.0",
    "sass": "^1.43.2"
    }
    }
    
13. 

    @uasi

    more_horiz

    その gulpfile.js は require() を repuire() と打ち間違えていますし、 gulp sass を実行したとしても sass タスクが登録されていないので動きません。最初使えていたというものと別のものを貼っていませんか？
    
    ともかく、その gulpfile.js は以下の修正を加えると動くようになります。
    
    1. repuire() を require() に直す。
    
    2. gulp を実行すると Cannot find module 'パッケージ名' とエラーが出るので、 npm install パッケージ名 --save-dev を実行する。また gulp を実行すると別のパッケージ名で同じエラーが出るので、エラーが消えるまでこの手順を繰り返す。
    
    3. gulp sass タスクは存在しない。代わりに gulp buildStyles を実行する。