0

こんにちは。
gulpについて勉強しております。

色々なサイトを参考に、下記gulpfile.jsファイルを作成しましたが、
こちらは正しいでしょうか?もっとスマートな書き方がありますでしょうか?
(一応希望している処理は実行されます。)

//変数の宣言
var gulp = require('gulp'); //gulpを呼び出し使えるように。
var sass = require('gulp-sass'); //sassの呼び出し。
var autoprefixer =require('gulp-autoprefixer');  //ベンダープレフィックス呼び出し


// Sassコンパイルタスクの実行
gulp.task('sass', function(){
gulp.src('./css/sass/test.scss') // どのフォルダのsassを参照するのか設定
.pipe(sass({outputStyle: 'expanded'}))//出力をデフォルトからexpandedに変更。
.pipe(sass().on('error', sass.logError)) //sassを実行しエラーでても止めない。
.pipe(gulp.dest('./css/')); // コンパイルしたscssの出力先を設定
});


// watchタスク(**/*.scss変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
var watcher = gulp.watch('./css/sass/*.scss', ['sass']); 
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running         
tasks...');
  });
});

// gulpのデフォルト動作としてsass-watchを実行
gulp.task('default', ['sass-watch']);

//ベンダープレフィックス付与タスクの実行
gulp.task('sass', function () {
return gulp.src('./css/sass/test.scss')
.pipe(sass().on('error', sass.logError))//コンパイル時にエラーがでても止めない。
.pipe(autoprefixer({  //autoprefixerの実行
    browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],//メインブラウザの最新2バージョン、iOS 8.1以上、Android Browser 4.4以上という指定
    cascade: false
    }))   
.pipe(gulp.dest('./css/'));
});

しかし、

.pipe(sass({outputStyle: 'expanded'}))//出力をデフォルトからexpandedに変更。

の部分がうまくいっていないみたいで、sassファイルコンパイル後のcssファイルがデフォルトのままで見づらいです。原因がわかる方いらっしゃいますでしょうか?

※そのうえで、もし可能であればブラウザの自動更新タスクの記述を追加したいです。(browser-sync)

以上です。
よろしくお願いいたします。


追記: sass タスクが2つあるのは、全く意図はしたものではなく、見よう見まねでやってみたものです。修正いただけると助かります。

6
  • タスク sass の定義が二箇所にあるようですが、意図した物ですか? そうだとすれば、それはどの様な意図ですか?
    – mjy
    2017年10月22日 4:50
  • コメントありがとうございます。全く意図はしておりません!見よう見まねでやってみました!修正いただけると助かります。
    – user25866
    2017年10月23日 13:33
  • 情報の追加は、質問本文に行なわないと他の方の目に触れません。とりあえず、追記という形で編集させていただきました。さて、「修正いただけると助かります」との事ですが、まずご自分で行なってみると、不明な点、エラーになった点、期待と異なる出力などが、具体的に出て来ると思います。その後の方が、回答が得られ易い具体的な質問が書けると思いますので、結果として早く解決する事が多いです。
    – mjy
    2017年10月23日 15:20
  • 1
    また、browser-sync を使いたいというのは、別の問題かと思いますので、別の質問になさるのがよいと思います。これも、まずご自分でトライし、具体的な問題にあたってからの方が、ただ「やって欲しい」という依頼ではなく、具体的な質問になりますので、回答が得られやすいです。
    – mjy
    2017年10月23日 15:23
  • マルチポスト teratail.com/questions/96300
    – htb
    2017年10月24日 6:16

0

この質問に回答するには、ログインする必要があります。