// プラグインの読み込み
var gulp = require("gulp");
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var nested = require('postcss-nested');
var csswring = require('csswring');
var calc = require('postcss-calc');
var customProperties = require("postcss-custom-properties");
var browserSync = require("browser-sync");

// style.scssをコンパイルします。
// コンパイル後は、src/cssフォルダにソースマップとともにファイルを保存します。
gulp.task("default", function () {
gulp.src("src/css/style.scss");// 対象の決定
// .pipe(sourcemaps.init())// プラグインの実行
// .pipe(sass({outputStyle: "expanded"}))
// .pipe(autoprefixer({
// browsers: ["ios_saf >= 8", "Android >= 4"]
// }));
return gulp.src(
['./src-before/' , './src-before//*'],
{ base: 'src-before' }) //src-before下にある.cssファイルを指定
.pipe(postcssimport())
.pipe(postcss())
.pipe(cssnext()) //PostCSSにファイルを処理してもらう
.pipe(nested())
.pipe(csswring())
.pipe(calc())
.pipe(browserSync())
.pipe(autoprefixer({
browsers: ["ios_saf >= 8", "Android >= 4"]
}))
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest-after/css')); //生成されたCSSをdest-after下に配置
});

//ローカルサーバーを立て、
//ファイル更新時に自動リロードするタスクです
gulp.task("default", function () {
//初期設定です
browserSync.init({
server: {
baseDir: "./" // このディレクトリをルートとしたサーバを立ち上げることができる。
}
});
});

gulp.watch ("../src-before/foundation/", function () { // ./*に変更があったら下記のブラウザシンクを更新してくれ
browserSync.reload();
});

//以下gulp-watch
gulp.task('watch', function(){
gulp.watch(['src-before/' , 'src-before//' , 'src-before///']);//監視したいファイルの相対パス
});

[BS] Access URLs:

Local: //localhost:3000
External: //192.168.2.111:3000

  UI: //localhost:3001

UI External: //192.168.2.111:3001

[BS] Serving files from: ./
[BS] Watching files...
[BS] File changed: ..src-beforefoundation_base.css
[BS] File changed: ..src-beforefoundation_base.css
[BS] File changed: index.html
[BS] File changed: ..src-beforefoundation_base.css

C:.
├─dest-after
│ ├─css
│ │ ├─foundation
│ │ ├─layout
│ │ └─object
│ │ ├─component
│ │ ├─project
│ │ └─utility
│ ├─html
│ ├─img
│ │ ├─common-img
│ │ └─index
│ ├─js
│ ├─plugin
│ └─web-font
├─node_modules
│ ├─.bin
│ ├─abbrev
│ ├─accepts
│ │ └─node_modules
│ │ ├─mime-db
│ │ └─mime-types

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require('gulp-postcss');
const cssPlugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];

gulp.task("css", function(){
    gulp.src('./src-before/css/**/*.css')
        .pipe(postcss(cssPlugins))
        .pipe(gulp.dest('./dest-after/'));
});

gulp.task('watch', function(){
    gulp.watch('./src-before/css/**/*.css', ["css"]);
});

gulp.task("server", function(){
    browserSync.init({
        server: {
            baseDir: "./dest-after/",
        },
    });
    gulp.watch(['dest-after/*', 'src-before/**' , 'src-before/**/*' , 'src-before/**/**/*']).on('change', browserSync.reload);
});

gulp.task("default", ["watch", "server"]);

gulp.watch("./dest/**/*").on('change', browserSync.reload);

gulp.watch('./src/css/**/*.css', ["css"]);

// gulpfile.js
// src -> dest

const gulp = require("gulp");
const browserSync = require("browser-sync").create();
const postcss = require('gulp-postcss');
const cssPlugins = [
    require('postcss-import'),
    require('postcss-cssnext'),
    require('postcss-nested'),
    require('csswring'),
    require('postcss-calc'),
    require("postcss-custom-properties"),
];

gulp.task("css", function(){
    gulp.src('./src/css/**/*.css')
        .pipe(postcss(cssPlugins))
        .pipe(gulp.dest('./dest/'));
});

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

gulp.task("server", function(){
    browserSync.init({
        server: {
            baseDir: "./dest/",
        },
    });
    gulp.watch("./dest/**/*").on('change', browserSync.reload);
});

gulp.task("default", ["watch", "server"]);