postcssを使ってgulpでトランスパイルして、サイト制作を初めて行います。 cssファイルを皆さんどこにおいてどのように行いますか？ gulpのsrcフォルダに入れてそれをサブライムのプロジェ

Question

postcssを使ってgulpでトランスパイルして、サイト制作を初めて行います。

cssファイルを皆さんどこにおいてどのように行いますか？
gulpのsrcフォルダに入れてそれをサブライムのプロジェクトとして認識させて、
そこでコーディングを行い、定期的にトランスパイルして確認し、
最後にどこかに移動するという形でしょうか？

定期的にトランスパイルして確認するので他のフォルダでコーディングをして毎回srcに
移すのは大変すぎますよね。

ｇｕｌｐでミニファイなどを行っているのですが、src直下にないものは圧縮してくれないようですね。
下記のようにしてもフォルダがコピーされるだけで中身のファイルは空になっています。
return gulp.src('./src-before/*')

cssも直下とfoundationなど別フォルダを作ってその中にcssファイルを入れたりすると思うのですが、
そのような場合どうしていますか？

サブライムで開いたり、定期的にブラウザでチェックするのを考えると、毎回自分でcssファイルを移動するのは大変ですよね。

gulpwatchで自動的にdestフォルダにトランスパイルしたCSSファイルが作成されるので、
その後destフォルダの中にhtmlや画像もすべて入れて定期的にブラウザ上で確認し、
完成してから、それらを保存場所やサーバに移動するのが、現場でのやり方なのでしょうか？

その後下記のふたつが、srcにトランスパイルした、cssファイルを毎回移動することなく、
ブラウザ上での確認を可能にしてくれるのかなと思ったのですが、
postcssに対応しているという情報が見つかりません。
下記どちらかでpostcssで上記の要望を実現できないでしょうか？
Preprosは有料のようですが、制限付きで無料で使えると聞いていますが、
普通にコーディングする程度ならそれで十分でしょうか？

Prepros
    http://alphapixels.com/prepros/
Koala
    http://blog.sou-lab.com/koala/

上記二つはどうもgulpのGUI版のようでが、結局同じことが両方ともできるのですかね。

Answer 1

watchというメソッドがあるので、それでsassなりjadeなりコンパイルが必要なファイルに編集があったら、自動で指定の出力先フォルダにコンパイル後のcssやhtmlを保存させるようにすればいいと思います。

Comments

[退会済みユーザー]

ありがとうございます。

下記のようになりました。
これで毎度このコマンドを打って放っておけば、勝手にトランスパイルしてくれるのですね。
gulp watch
(node:3340) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[11:14:57] Using gulpfile ~\Desktop\images\gulp-folder\postcss\gulpfile.js
[11:14:57] Starting 'watch'...
[11:14:57] Finished 'watch' after 74 ms

・
//gulpfile.js
var gulp = require('gulp'); //gulpをインポート
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var nested = require('postcss-nested');
var reporter = require('postcss-reporter'); //stylelintだけだとレポートが出力されない為
var csswring = require('csswring');
var calc = require('postcss-calc');
var postcssimport = require('postcss-import');

gulp.task('css', function () { //”css”タスクを登録
var plugins = [
cssnext, //一旦空の配列を作成
nested,
reporter,
calc,
csswring,
postcssimport
];
return gulp.src('./src-before/*') //src-before下にある.cssファイルを指定
.pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう
.pipe(gulp.dest('./dest-after')); //生成されたCSSをdest-after下に配置
});

gulp.task('watch', function(){
gulp.watch('./src/scss/*.scss', ['sass']);
});

Answer 2

http://akabeko.me/blog/2015/01/gulp-copy-keep-dir-structure/

こちらで解決しました。