前回は、gulpを使ってcssの圧縮とベンダープレフィックス付けを行うタスクを作成するところまで行いましたので、今回は、jsの圧縮(uglify)と複数のjsファイルを一つのファイルに結合する(concat)タスクを作成したいと思います。
今回作成したタスクでできることは、
- ・scssのコンパイル
- ・cssの圧縮とベンダープレフィックス付け
- ・jsの圧縮と結合
になります。
※Mac環境を前提とします。またnode.js、rubyはインストールしてあるものとして進めます。
gulpでjsを圧縮する(uglify)
gulpでjsファイルを圧縮するには、gulp-uglifyというプラグインを使用します。
これまでと同様に、
npm install gulp-uglify –save-dev
とターミナルでたたき、gulp-uglifyをインストールします。
インストールができたら、gulpfile.jsにタスクを追記します。
‘uglify’という名前でタスクを作成しています。
対象とするファイルは、jsディレクトリ内のすべてのjsファイルにしています。
uglifyのオプションにpreserveComments: ‘some’と設定することで、ライセンス表記などのコメントは圧縮しない指定ができます。
これでターミナルより、gulp uglifyとたたくと/dst/jsディレクトリに圧縮されたjsファイルが作成されます。
gulpでjsを結合する(concat)
jsの結合は、gulp-concatのプラグインを使います。
npm install gulp-concat –save-dev
で、gulp-concatをインストールします。
インストールが完了したら、concatのタスクを作成します。
結合するファイルの対象は、gulp.src()で指定しています。
今回は、jsディレクトリ内のすべてのjsファイルを一つのjsファイルにまとめる設定になります。
concat()で、concatの実行と、作成するjsファイルの名前を指定しています。
gulp.dest()で、作成するjsファイルの配置先を指定しています。
この設定で、gulp concatをたたくと、
/dst/jsディレクトリに、/src/jsディレクトリ内のjsファイルを結合したmain.min.jsというファイルが作成されます。
まとめ
今回はjsの圧縮と結合を行うタスクを作成しました。
次回は、これまで作成したタスクを、それぞれの対象のファイルが変更されたときに自動で実行するように設定できるwatchタスクを作成します。
以上になります。
