読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

grunt.jsをインストール

grunt JavaScript

スポンサードリンク

http://www.flickr.com/photos/26127430@N04/9587848240
photo by jalbertbowdenii


minify化ってのに以前から興味があったのでgrunt.jsを試してみました。


$ sudo npm install -g grunt-cli


$ npm install grunt-contrib-concat -save-dev
$ npm install grunt-contrib-uglify -save-dev
$ npm install grunt-contrib-watch -save-dev

$ grunt init:gruntfile
A valid Gruntfile could not be found. Please see the getting started guide for more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.


??? エラー?


無くても大丈夫らしい


自分で作る

$ vim GruntFile.js

#####################
module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        concat: {
            files: {
                // 元ファイルの指定
                src : 'js/*.js',
                // 出力ファイルの指定
                dest: 'js/concat/projcet.js'
            }
        },

        uglify: {
            dist: {
                files: {
                    // 出力ファイル: 元ファイル
                    'js/min/projcet-min.js': 'js/concat/projcet.js'
                }
            }
        },

        watch: {
            js: {
                files: 'js/*.js',
                tasks: ['concat', 'uglify']
            }
        }
    });

    // プラグインのロード・デフォルトタスクの登録
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['concat', 'uglify']);
};
#####################


準備

$ mkdir js/min
$ mkidr js/concat


実行

$ grunt watch


おーすげー! できた!


試す


???


うまくjsが動かなくなりました(´・ω・`)


これってあれかな? ファイルを分けなきゃいけないやりかたもあるのかね?


一緒にしてしまうと実行のタイミングとかどうなるんかいな。


デビュー戦は黒星に終わりましたとさorz