jsファイルを一括置換して、セーブオールをすると、ちゃんとトランスパイルされない。
jsファイルを一括置換して、セーブオールをすると、ちゃんとトランスパイルされない。
コマンドプロンプト上には下記のようにちゃんと出てくるのに、実際にファイルを見ると変更されていません。
[18:32:15] Finished 'babeltrance' after 4.68 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 4.69 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 2.23 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 2 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 1.95 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 2.09 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 3.2 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 2.49 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 2.95 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 3.55 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 2.97 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 2.04 ms
[18:32:15] Starting 'babeltrance'...
[18:32:15] Finished 'babeltrance' after 3.21 ms
[18:32:15] Starting 'babeltrance'...
[18:32:16] Finished 'babeltrance' after 2.96 ms
[18:32:16] Starting 'babeltrance'...
[18:32:16] Finished 'babeltrance' after 1.91 ms
[18:34:00] Starting 'babeltrance'...
[18:34:00] Finished 'babeltrance' after 33 ms
[18:36:19] Starting 'babeltrance'...
[18:36:19] Finished 'babeltrance' after 8.25 ms
ひとつづつやるとちゃんとできたりとても不安定です。
全くできてないわけではありませんが、出来たりできなかったいします。
ソースコード
var gulp = require('gulp'); //gulpをインポート
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var csswring = require('csswring');
var babel = require("gulp-babel");
var changed = require('gulp-changed');
var browserSync = require('browser-sync').create();
var csscomb = require('gulp-csscomb'); //css整形
var plumber = require('gulp-plumber');
gulp.task('babeltrance', function() {
gulp.src('./babel-before/*.js', ['babeltrance'])
.pipe(plumber())
.pipe(babel({
presets: ['es2015'],
compact: false, // 100kb超えても圧縮しない
}))
.pipe(changed('./'))
.pipe(gulp.dest('./'));
});
gulp.task('babelwatch', function() {
gulp.watch('./babel-before/*.js', ['babeltrance']);
});
gulp.task('babel', ['babeltrance', 'babelwatch']);
const plugins = [
require('postcss-import'),
require('postcss-cssnext')({
browsers: [
'last 2 version',
'iOS >= 8.1',
'Android >= 4.4',
],
}), //ソースではわからないが、IE9以上は、remが使えるので、remからpxを生成されないように、こちらで行っている
require('csswring')
];
gulp.task("css", function(){ //return gulp.srcのreturnは上から順番に処理するという意味
gulp.src('./src-before/**/*.css')
.pipe(plumber())
.pipe(postcss(plugins))//PostCSSにファイルを処理してもらう。pluginsは変数
.pipe(gulp.dest('./dest-after/css'));//生成されたCSSの排出先。dest-after/cssの中に配置
});
gulp.task('watch', function(){
gulp.watch(['dest-after/index.html', 'dest-after/*', 'src-before/**/*' , 'src-before/**/**/*'], ["css"]);
});
// ブラウザシンク
//ローカルサーバーを立て、
//ファイル更新時に自動リロードするタスクです
gulp.task("server", function () {
//初期設定です
gulp.task("server", function () {
browserSync.init({
server: {
baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。
},
files: [
"dest-after/index.html",
"dest-after/*.js",
"dest-after/app.css",
]
});
});
// browserSync.init({
// server: {
// baseDir: "./dest-after/" // このディレクトリをルートとしたサーバを立ち上げることができる。
// }
// });
gulp.watch (['dest-after/index.html', 'dest-after/*', 'src-before/**/**/*'], browserSync.reload);
}); // 左で指定したファイルに変更があったら下記のブラウザシンクを更新するように指定する。
gulp.task("default", ["watch", "server"]);
// /ブラウザシンク
gulp.task('comb', function () {
return gulp.src('./src-before/**/*.css')
.pipe(csscomb()) // gulp-csscombで整形してあげて、
.pipe(gulp.dest('./dest-after/comb'));//生成されたCSSの排出先。dest-after/cssの中に配置
});