LoginSignup
17

More than 5 years have passed since last update.

grunt+bowerで指定ディレクトリ(public/{css,js,img})に、ライブラリをばらまく

Last updated at Posted at 2014-05-16

laravel用にライブラリ置くために調べたけど、cakephpでもrailsでも手順は大体一緒
やってることとしては、「./public/lib」にgumbyとjquery, underscore.jsを配置している

手順としては、フレームワークおいてるルートディレクトリに、
以下に貼り付けた「Gruntfile.js」と「bower.js」おいて、gruntコマンド叩くだけ

             /)
           ///)
          /,.=゙''"/
   /     i f ,.r='"-‐'つ___   gruntのインスコ方法? こまけぇこたぁいいんだよ!!
  /      /   
,.-‐'~/⌒  ⌒\
    /   ,i   ,二ニ⊃( ●). (●)\
   /    ノ    il゙フ::::::⌒()⌒::::: \
      ,イ「ト、  ,!,!|     |r┬-|     |
     / iトヾヽ_/ィ"\      `ー'´     /

まー、いちおnodeとgruntのインスコ方法書いとく。ハマったら適宜ググるかんじで

brew install nvm
source ~/nvm/nvm.sh
nvm install v0.10.28
nvm alias default v0.10.28
nvm use v0.10.28
npm install -g grunt-cli
npm install grunt --save-dev
npm install grunt-bower-task --save-dev

下に貼り付けた「Gruntfile.js」と「bower.js」をルートに置いて、gruntコマンドを実行。事故ったら怖いから、
./public/lib/{name}/{js,css,img}で展開されるようにしといた。

% npm init [Enter連打]
% grunt
Running "bower:install" (bower) task
>> Cleaned target dir /usr/local/Cellar/httpd/2.2.27/share/apache2/htdocs/annotator/public/lib
>> Installed bower packages
>> Copied packages to /usr/local/Cellar/httpd/2.2.27/share/apache2/htdocs/annotator/public/lib

Done, without errors.
Gruntfile.js
module.exports = function (grunt) {
  'use strict';
  pkg: grunt.file.readJSON("package.json"),
  grunt.initConfig({
    bower: {
      install: {
        options: {
          targetDir: './public/lib/',
          layout: 'byComponent',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      }
    },
  });
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.registerTask('default', ['bower:install']);
};

bower.json
{
  "name": "AppName",
  "version": "0.0.1",
  "main": "index.js",
  "keywords": [
    "bower",
    "jquery",
    "underscore",
    "gumby"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "components",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {},
  "exportsOverride": {
    "jquery": {
      "js": "**/*.js",
      "css": "**/*.css"
    },
    "underscore": {
      "js": "**/*.js"
    },
    "gumby": {
      "css": "**/*.css",
      "js": "**/*.js",
      "img": [
        "**/*.jpg",
        "**/*.png",
        "**/*.gif"
      ],
      "fonts/icons": [
        "**/*.eot",
        "**/*.ttf",
        "**/*.woff"
      ]
    }
  },
  "dependencies": {
    "jquery": "1.11.1",
    "underscore": "~1.6.0",
    "gumby": "~2.6.3"
  }
}

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
17