uglify-js
と clean-css
でminifiedするタスクをgulpで自動化するスクリプトを書こうとしています。
下記のスクリプトから、 build
タスクを実行後、それぞれのタスクが実行されるところまでは正常に動いているようですが、 minify-js
タスクが終了する前に build
タスク自体が終了してしまいます。
javascript
1const gulp = require('gulp'); 2const sass = require('gulp-sass'); 3const plumber = require('gulp-plumber'); 4const sourcemaps = require('gulp-sourcemaps'); 5const browserSync = require('browser-sync'); 6const uglify = require('gulp-uglify'); 7const cleanCSS = require('gulp-clean-css'); 8const concat = require('gulp-concat'); 9const babel = require('gulp-babel'); 10 11gulp.task('sass', function(){ 12 return gulp.src('./src/style/*.scss') 13 .pipe(plumber()) 14 .pipe(sourcemaps.init()) 15 .pipe(sass()) 16 .pipe(sourcemaps.write('./')) 17 .pipe(gulp.dest('./dist/css/')); 18}); 19 20// ブラウザリロード 21gulp.task('browser-sync', function() { 22 browserSync({ 23 server: { 24 baseDir: "./dist", 25 index : "index.html" 26 } 27 }); 28}); 29gulp.task('bs-reload', function () { 30 browserSync.reload(); 31}); 32 33//JS圧縮 34gulp.task('minify-js', function() { 35 return gulp.src([ 36 "./node_modules/jquery/dist/jquery.js", 37 "./node_modules/jquery.mousewheel/jquery.mousewheel.js", 38 "./node_modules/autosize/dist/autosize.js", 39 "./node_modules/cryptico/lib/cryptico.js", 40 "./node_modules/twemoji/2/twemoji.js", 41 "./src/javascript/main.js", 42 "./src/javascript/mode_global.js", 43 "./src/javascript/mode_config.js", 44 "./src/javascript/mode_instance.js", 45 ]) 46 .pipe(sourcemaps.init()) 47 .pipe(babel({ presets: ['es2015'] })) 48 //.pipe(babel()) 49 .pipe(uglify() 50 .on('error', function(e){ 51 console.log(e); 52 }) 53 ) 54 .pipe(concat('app.min.js')) 55 .pipe(sourcemaps.write('.')) 56 .pipe(gulp.dest('./dist/js')); 57}); 58 59//CSS圧縮 60gulp.task('minify-css', function() { 61 return gulp.src("./dist/css/*.css") 62 .pipe(sourcemaps.init()) 63 .pipe(cleanCSS()) 64 .pipe(concat('style.min.css')) 65 .pipe(sourcemaps.write('.')) 66 .pipe(gulp.dest('./dist/css')); // overwrite 67}); 68 69// watchタスク(html,js,sassファイル変更時に実行するタスク) 70gulp.task('sass-watch', ['sass','browser-sync'], function(){ 71 let watcher = gulp.watch('./src/style/*.scss', ['sass']); 72 gulp.watch("./*.html",['bs-reload']); 73 watcher.on('change', function(event) { 74 console.log('コンパイルOK!'); 75 }); 76 gulp.watch("./src/style/*.scss",['bs-reload']); 77 gulp.watch("./src/javascript/*.js",['bs-reload']); 78}); 79 80gulp.task('default', ['sass-watch','browser-sync']); 81gulp.task('build',['minify-css','minify-js']);
タスク実行時のログは以下の通りです。
minify-cssタスクは完了していますが、minify-jsタスクおよび親タスクであるbuildも完了メッセージが表示されません。
bash
1$ npx gulp build 2[16:07:16] Using gulpfile ~/repository/project/gulpfile.js 3[16:07:16] Starting 'minify-css'... 4[16:07:16] Starting 'minify-js'... 5[16:07:19] Finished 'minify-css' after 3.22 s 6$
上記タスク実行後、 ./dist/css
にminifiedされたcssとソースマップは出力されますが、 ./dist/js
にjsファイルが出力されません。
解決方法をご存知でしたら、ご教示の程、宜しくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。