##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
ご教授いただけませんでしょうか…
宜しくお願い致します!
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。