golangの日記

Go言語を中心にプログラミングについてのブログ

Gulpでブックマークレットを作る

javascript.png


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.srcreturn し、 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"))})());