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

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

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

Gitはオープンソースの分散バージョン管理システム(DVCS)です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

gulp

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

Q&A

1回答

3555閲覧

Gulpのエラーメッセージについて

kahosayshello

総合スコア4

Git

Gitはオープンソースの分散バージョン管理システム(DVCS)です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

gulp

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

1グッド

0クリップ

投稿2020/05/04 15:33

##Gulpにて、下記のエラーメッセージが出るため、SCSSのコンパイルが実行できません。

######下記はターミナルのエラー文です
gulp-notify: [Error running Gulp] Error: Invalid built-in order 'alphabetically' provided.
Available built-in orders are: alphabetical,concentric-css,smacss

######私のgulpfile.jsが、以下になります。

js

1var gulp = require('gulp'); 2var sass = require('gulp-sass'); //Sassコンパイル 3var plumber = require('gulp-plumber'); //エラー時の強制終了を防止 4var notify = require('gulp-notify'); //エラー発生時にデスクトップ通知する 5var sassGlob = require('gulp-sass-glob'); //@importの記述を簡潔にする 6var browserSync = require('browser-sync'); //ブラウザ反映 7var postcss = require('gulp-postcss'); //autoprefixerとセット 8var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与 9var cssdeclsort = require('css-declaration-sorter'); //css並べ替え 10var imagemin = require('gulp-imagemin'); 11var pngquant = require('imagemin-pngquant'); 12var mozjpeg = require('imagemin-mozjpeg'); 13// var ejs = require("gulp-ejs"); 14// var rename = require("gulp-rename"); //.ejsの拡張子を変更 15 16 17// scssのコンパイル 18gulp.task('sass', function () { 19 return gulp 20 .src('./src/scss/**/*.scss') 21 .pipe(plumber({ 22 errorHandler: notify.onError("Error: <%= error.message %>") 23 })) //エラーチェック 24 .pipe(sassGlob()) //importの読み込みを簡潔にする 25 .pipe(sass({ 26 outputStyle: 'expanded' //expanded, nested, campact, compressedから選択 27 })) 28 .pipe(postcss([autoprefixer({ 29 // ☆IEは11以上、Androidは4.4以上 30 // その他は最新2バージョンで必要なベンダープレフィックスを付与する 31 "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"], 32 cascade: false 33 })])) 34 .pipe(postcss([cssdeclsort({ 35 order: 'alphabetically' 36 })])) //プロパティをソートし直す(アルファベット順) 37 .pipe(gulp.dest('./dest/css')); //コンパイル後の出力先 38}); 39 40// 保存時のリロード 41gulp.task('browser-sync', function (done) { 42 browserSync.init({ 43 44 //ローカル開発 45 server: { 46 baseDir: "./", 47 index: "index.html" 48 } 49 }); 50 done(); 51}); 52 53gulp.task('bs-reload', function (done) { 54 browserSync.reload(); 55 done(); 56}); 57 58// gulp.task("ejs", (done) => { 59// gulp 60// .src(["ejs/**/*.ejs", "!" + "ejs/**/_*.ejs"]) 61// .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック 62// .pipe(rename({extname: ".html"})) //拡張子をhtmlに 63// .pipe(gulp.dest("./")); //出力先 64// done(); 65// }); 66 67// 監視 68gulp.task('watch', function (done) { 69 gulp.watch('./src/scss/**/*.scss', gulp.task('sass')); //sassが更新されたらgulp sassを実行 70 gulp.watch('./src/scss/**/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行 71 gulp.watch('./src/js/*.js', gulp.task('bs-reload')); //jsが更新されたらbs-relaodを実行 72 gulp.watch('./ejs/**/*.ejs', gulp.task('ejs')); //ejsが更新されたらgulp-ejsを実行 73 gulp.watch('./ejs/**/*.ejs', gulp.task('bs-reload')); //ejsが更新されたらbs-reloadを実行 74}); 75 76// default 77gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch'))); 78 79//圧縮率の定義 80var imageminOption = [ 81 pngquant({ 82 quality: [70 - 85], 83 }), 84 mozjpeg({ 85 quality: 85 86 }), 87 imagemin.gifsicle({ 88 interlaced: false, 89 optimizationLevel: 1, 90 colors: 256 91 }), 92 imagemin.mozjpeg(), 93 imagemin.optipng(), 94 imagemin.svgo() 95]; 96// 画像の圧縮 97// $ gulp imageminで./src/img/base/フォルダ内の画像を圧縮し./src/img/フォルダへ 98// .gifが入っているとエラーが出る 99gulp.task('imagemin', function () { 100 return gulp 101 .src('./src/img/base/*.{png,jpg,gif,svg}') 102 .pipe(imagemin(imageminOption)) 103 .pipe(gulp.dest('./src/img')); 104});

何か間違っているのでしょうか…?
初心者のため、ターミナルのコマンド程度しか理解できておらず
全て参考サイトからコピーペーストさせていただいたのですが><

参考サイトはこちらです:https://flex-box.net/gulp/#co-index-0

ご教授いただけませんでしょうか…
宜しくお願い致します!

退会済みユーザー👍を押しています

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

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

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

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

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

guest

回答1

0

このエラーメッセージによると

gulp-notify: [Error running Gulp] Error: Invalid built-in order 'alphabetically' provided.
Available built-in orders are: alphabetical,concentric-css,smacss

Error: 不正な指定 'alphabetically'
使える指定は、alphabetical、concentric-css、smacss

と出力されています。

パッケージcss-declaration-sorterのページで確認すると
https://www.npmjs.com/package/css-declaration-sorter

Built-in sorting orders、は
・alphabetical (デフォルト)
・smacss
・concentric-css
のどれかを指定と書いてあります。

つまり、

.pipe(postcss([cssdeclsort({
order: 'alphabetically'

の部分、

order: 'alphabetically'
ではなく
order: 'alphabetical'
と違いますか?

投稿2020/05/04 17:13

technocore

総合スコア7337

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問