Gulpでブックマークレットを作る
Gulpを使ってファイルに書いたブックマークレット(JavaScript)を圧縮する。
gulpのバージョン 3.x.x と 4.x.x で仕様変更があったようで、以下の2つのエラーが出る(このエラーの対処が主目的)
The following tasks did not complete: default, js Did you forget to signal async completion?
必要なものをインストールする
$ yarn global add gulp $ yarn add --dev gulp-uglify gulp-rename gulp-replace
ディレクトリ(フォルダ)構成
. ├── gulpfile.js ├── package.json ├── yarn.lock └── src └── index.js
./src/index.js (サイト内検索するJavaScript)
(function() { var words, hostname, url; words = (prompt('Site Search', '')).trim(); if (words === null || words === '') return; words = encodeURIComponent(words) hostname = (location.hostname) url = 'https://www.google.co.jp/search?q=' + words + '&domains=' + hostname + '&sitesearch=' + hostname; window.open(url, '_blank'); })();
gulpfile.js
エラーが出ないようにするには gulp.src
を return
し、
gulp.task('default'
のコールバックのコールバックに引数として渡ってくる関数をdone();
する
const gulp = require('gulp'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); const replace = require('gulp-replace'); gulp.task('js', () => { // リターンする return gulp.src('./src/index.js') .pipe(uglify()) .pipe(replace(/^!function/, 'javascript: void((function')) .pipe(replace(/}\(\);$/, '})());')) .pipe(rename('./dest/index.min.js')) .pipe(gulp.dest('.')); }); // 渡ってきた、引数を done(); する gulp.task('default', gulp.series('js', (done) => { done(); }));
デフォルトタスクの実行
$ gulp $ tree . ├── gulpfile.js ├── package.json ├── yarn.lock ├── dest │ └── index.min.js └── src └── index.js
./dest/index.min.js 圧縮後
javascript: void((function(){var o,n,e;null!==(o=prompt("Site Search","").trim())&&""!==o&&(e="https://www.google.co.jp/search?q="+(o=encodeURIComponent(o))+"&domains="+(n=location.hostname)+"&sitesearch="+n,window.open(e,"_blank"))})());