最近はフロントエンド部分の開発を行っていなかったので、JavaScriptやCSSの結合や圧縮をすることがなかったのですが、サイトの運用開始後にちょっとだけ修正するといったことも増えてきたので、この作業を自動化してみることにしました。
今回使ったのはGruntとというJavaScriptで記述するタスクランナーです。
https://www.jetbrains.com/help/phpstorm/grunt.html
基本的な手順は、PhpStorm 2017.2 Helpに書かれています。
今回はGit Bashを使って設定したので、GitとNode.js(windows版)を予めインストールしておきます。
管理者権限で起動したGit Bachでgrunt-cliをインストール
$ npm install -g grunt-cli
この時に表示されるインストールパスをメモ。
[Run] – [Edit Configurations…]でインタプリターの設定と、grant-cliのパスを指定。
package.jsonの初期化とgruntのインストール。必ず、プロジェクトディレクトリのルートに移動してからコマンドを実行します。
$ cd /d/workspace/hoge $ npm init $ npm install grunt --save-dev
[File] – [Settings…] – [Language & Frameworks] – [Node.js and NPM]
ここで、npm installが出来るっぽいんですが、上手くいかなかったので（インストールしたはずのパッケージがNot Foundになる）、引き続きGit Bashでインストール。
$ npm install grunt-contrib-concat --save-dev $ npm install grunt-contrib-ugify --save-dev
d:¥workspace¥hoge¥gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
concat: {
files: {
src : ['assets/js/plugin.js','assets/js/script.js'],
dest: 'assets/js/concat.js'
}
},
uglify: {
dist: {
files: {
'assets/js/all.js': 'assets/js/concat.js'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat', 'uglify']);
};
plugin.jsとscript.jsを結合して、concat.jsとして保存して、それをminifyしてall.jsとして出力する例。
[View] – [Tool Window] – [Grunt]でGruntのツールウィンドウが開くので、そこから実行。
コメント