Gulpのバージョンを3から4にアップデートしたので、ABUIのgulpfile.jsの書き方を変更しました。
最新のgulpfile（2019.4月現在）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
const { src, dest, series, parallel, watch, task } = require('gulp'); const sass = require('gulp-sass'); const compass = require('gulp-compass'); const uglify = require('gulp-uglify-es').default; const concat = require('gulp-concat'); const plumber = require('gulp-plumber'); const rename = require('gulp-rename'); const webserver = require('gulp-webserver'); /** * ローカル・ウェブサーバー */ function server() { return src('.') .pipe(webserver({ directoryListing: true, host: '0.0.0.0', // host: "localhost", open: true, port: 8080 })); } /** * Sass 圧縮 */ function style() { return src( [ 'scss/**/*.scss', 'scss/*.scss' ]) .pipe(plumber({ errorHandler: function (error) { this.emit('end'); } })) .pipe(compass({ config_file: 'config.rb', comments: false, css: 'css/', sass: 'scss/' })) .pipe(dest('css/')); } /** * abui.min.js 生成タスク */ function abuiMin() { return src( [ 'js/src/jquery-2.2.4.min.js', 'js/src/jquery-ui-1.12.1.min.js', 'js/src/bootstrap-3.3.7.min.js', 'js/src/plugins/*.js', 'js/abui/*.js' ], {sourcemaps: true}) .pipe(plumber()) .pipe(concat('abui.js')) .pipe(uglify({ /* options */ output:{ comments: /^!/ } })) .pipe(rename('abui.min.js')) .pipe(dest('js/', {sourcemaps: './maps'})); } /** * JSの圧縮 */ function script() { return src([ 'js/guideline.js', 'js/guideline_form.js', 'js/guideline-layout.js', 'js/mockup-util.js' ], {sourcemaps: true}) .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(dest(`js/`, {sourcemaps: './maps'})); } /** * ファイルの変更を監視 */ watch(['scss/**/*.scss', 'scss/*.scss'], style); watch(['js/src/*.js', 'js/src/plugins/*.js', 'js/abui/*.js'], abuiMin); watch(['js/*.js', '!js/*.min.js'], script); /** * 並列処理でタスクを実行する */ exports.default = parallel(server, style, abuiMin, script); |
・1〜8行目
プラグインを読み込んでます。
・11〜87行目
タスクを登録します。v3では gulp.task()メソッドが使われていましたが、v4では非推奨となりました。その他、タスクを直列処理する series()と並列処理する parallel()メソッドが使えます。
タスク毎にモジュール化しています。（注：returnを記述しないとエラーになります。）
sourcemapは今まではプラグインを使ってましたが、v4では標準で使える様になりました。
・90〜95行目
ファイルの変更を監視してます。v3では
gulp.watch()メソッドが使われてましたが、
v4はchokidarを使用したものになりました。
・100行目
exports.defaultで登録したタスクを実行します。defaultは必須です。
この他、詳しい説明は公式ドキュメントを参照してください。
