LoginSignup
1
0

More than 3 years have passed since last update.

vsCodeにgruntを導入してみた

Last updated at Posted at 2020-01-16

概要

各種jsのcombine(結合)及びminify(難読)を行うためのツールで他にも有名どころとしてgulp、google closure compilerがある。
visualStudioCodeで作業することが多かったため、vsCodeへの導入をメモ

導入手順

※導入するプロジェクトファイあるのルートを開いた状態でスタートすること

  1. Node.jsをインストールする
    (vsCodeでnpm, nodeが使用できるようになる)
    (Node.js)https://nodejs.org/en/
     LTSの方をインストール

  2. Node.jsがインストールできたら、vsCodeを再起動する

  3. vsCodeのターミナルでgrunt-cliをインストール
    npm install -g grunt-cli

  4. フォルダにgruntをインストール
    (初回のみ gitにコミット済みであればスキップ)
    場所は、プロジェクトのルートがいい(srcと同じ階層など)
    npm install grunt -save-dev
    grunt -Vでverが確認できればおk

  5. Gruntfile.jsを作成
    (初回のみ gitにコミット済みであればスキップ)


/// Gruntfile.js
module.exports = function (grunt) {
    // タスクの設定
    grunt.initConfig({
        uglify: {//← uglifyでないとダメ コマンド設定
            options: {// オプションを設定する
                mangle: true,//ローカル変数名を短い名称に変更し難読化します。
                compress: true//冗長なコードを短くまとめてくれます。
                // beautify: true//改行、インデントは取り除かず、読みやすいように整形します。
                // sourceMap:/*ソースマップも合わせて出力します。ファイルの展開先と同じディレクトリに生成されます。ソースマップは、ファイルのマッピングを解決してくれるので圧縮されたファイルでデバッグする際に便利です*/
                // sourceMapName://ソースマップの生成先とファイル名を指定できます。 文字列をそのまま渡すか、関数でも渡せます。
                // preserveComments: /*メントの残し方を指定します。'all' ですべてのコメントを残します'some' で /*! から始まるコメントだけ残ります。バナーやライセンス表記の際に便利です*/
                // banner: //指定文字列をファイル冒頭、もしくは下部に追加した状態で生成されます
                // footer: //指定文字列をファイル冒頭、もしくは下部に追加した状態で生成されます
            },
            build1: { //srcにminify化したいファイルのパス destにminify化後のパスを記載する
                src: 'src/js_dev/test1.js',
                dest: 'src/build/test1.min.js'
            },
            build2: {
                src: 'src/js_dev/test2.js',
                dest: 'src/build/test2.min.js'
            }
        },
        concat: {//← concatでないとダメ コマンド設定
            js: {//← 好きな名前でどーぞ build1とかと同様
                files: {
                    'src/build/combine.js': [// 統合ファイルのパス
                        'src/build/test1.min.js',// 統合元のファイルのパス
                        'src/build/test2.min.js'
                    ]
                }
            }
        },
       watch: {
            dev: {
                files: [// ←監視したいファイルのパスを設定
                    'src/js_dev/*.js',
                    'src/js_dev/*/*.js',
                ],
                tasks: ['uglify', 'concat'],// ←監視しているファイルに更新があった場合に行うタスクを設定
            }
        }
    });
    // モジュールの読み込み
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');    
    grunt.loadNpmTasks('grunt-contrib-watch');
    // タスクの登録
    grunt.registerTask('default', ['uglify', 'concat']);
};
//grunt uglifyを実行するとbuild1とbuild2が実行される
//grunt uglify:build1を実行するとbuild1のみ実行される
//grunt を実行するとuglifyを実行した後にconcatを実行する
//grunt watchを実行するとファイルの監視が始まり、監視しているファイルが更新されるたびにtasksが実行される

自動更新について

1. npm install grunt-contrib-watch --save-dev(ファイル監視)
でwatchを導入し、Gruntfile.jsにwatchの設定をする

2. vsCodeのコンソールにてgrunt watchを入力

C:\MyWorks\test>grunt watch
Running "watch" task
Waiting...

のようになればOK

参考文献

https://qiita.com/koara-local/items/1db82e3bfb3064c41862
http://webdrawer.net/javascript/firstgrunt.html
https://qiita.com/shuntaro_tamura/items/6cf755d408eaad8572ad
http://blog.tsumikiinc.com/article/20140731_how-to-use-grunt-contrib-uglify.html
http://kudox.jp/server/grunt-js

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0