3300.me

http://nodejs.org/   // node.js インストール
node -v  // node.js バージョン確認
npm -v  // npm(node package manager: https://www.npmjs.org/) バージョン確認

sudo npm install -g grunt-cli  // grunt(http://gruntjs.com/) インストール
grunt -version  // grunt バージョン確認

sudo npm cache clean -f
sudo npm install -g n
sudo n latest
sudo n stable
sudo n 4.7.0 

// enter every 1 line
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done

// enter every 1 line
sudo rm -rf /usr/local/lib/node \
   /usr/local/lib/node_modules \
   /var/db/receipts/org.nodejs.*

// delete npm
sudo rm -rf ~/.npm

1) mkdir temp_grunt
2) cd temp_grunt
3) npm init  // package.json 生成

---

temp_grunt
└ package.json

---

// package.json
{
  "name": "temp_grunt",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

---

4) npm install grunt --save-dev
// gruntモジュールのインストールと --save-dev でpackage.jsonの更新

---

temp_grunt
├ node_modules/
└ package.json

---

// package.json
{
  "name": "temp_grunt",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "grunt": "~0.4.5"
  }
}

5) vi Gruntfile.js  // Gruntfile.js 作成

---

temp_grunt
├ Gruntfile.js
├ node_modules/
└ package.json

---

// Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    // "pkg"でpackage.jsonを参照する
    pkg: grunt.file.readJSON('package.json')
  });

  grunt.registerTask('default', '', function() {
    console.log('The task of the default was done.');
  });
  grunt.registerTask('typeA', '', function() {
    console.log('The task of the typeA was done.');
  });
};

---

// タスクの実行

grunt (default)
-> Running "default" task
-> The task of the default was done.
->
-> Done, without errors.

grunt typeA
-> Running "typeA" task
-> The task of the typeA was done.
->
-> Done, without errors.

npm install grunt-contrib --save-dev
// grunt-contrib-***** を個別にインストールすることも可能
// プラグインリスト -> http://gruntjs.com/plugins

---

temp_grunt
├ Gruntfile.js
├ node_modules/
└ package.json

---

// package.json

{
  "name": "temp_grunt",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "grunt": "~0.4.5"
  "grunt-contrib-symlink": "~0.3.0",
  "grunt-contrib-copy": "~0.5.0",
  "grunt-contrib-concat": "~0.4.0",
  "grunt-contrib-clean": "~0.5.0",
  "grunt-contrib-compass": "~0.7.2",
  "grunt-contrib-htmlmin": "~0.2.0",
  "grunt-contrib-sass": "~0.7.3",
  "grunt-contrib-watch": "~0.6.1",
  "grunt-contrib-uglify": "~0.4.0",
  "grunt-contrib-cssmin": "~0.9.0",
  "grunt-contrib-csslint": "~0.2.0",
  "grunt-contrib-handlebars": "~0.8.0",
  "grunt-contrib-qunit": "~0.4.0",
  "grunt-contrib-jst": "~0.6.0",
  "grunt-contrib-requirejs": "~0.4.4",
  "grunt-contrib-connect": "~0.7.1",
  "grunt-contrib-jade": "~0.11.0",
  "grunt-contrib-stylus": "~0.15.1",
  "grunt-contrib-compress": "~0.8.0",
  "grunt-contrib-nodeunit": "~0.3.3",
  "grunt-contrib-jshint": "~0.10.0",
  "grunt-contrib-coffee": "~0.10.1",
  "grunt-contrib-jasmine": "~0.6.5",
  "grunt-contrib-imagemin": "~0.7.1",
  "grunt-contrib-less": "~0.11.2",
  "grunt-contrib-yuidoc": "~0.5.2",
  "grunt-contrib": "~0.11.0"
  }
}

---

// Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pluginName: {
      ・・・
    },
    pluginName: {
      ・・・
    }
  });

  grunt.loadNpmTasks('grunt-contrib-pluginName');
  grunt.loadNpmTasks('grunt-contrib-pluginName');
  // 以下、a)でインストールして、b)のように書けば、上記の一括指定ができる
  // a) npm i --save-dev load-grunt-tasks
  // b) require('load-grunt-tasks')(grunt, {pattern: ['grunt-contrib-*', 'grunt-shell']});

  grunt.registerTask('default', ['pluginName','pluginName']);
};

temp_grunt
├ Gruntfile.js
├ base64/
├ config.rb
├ css/
├ html/
├ img/
├ js/
├ jsmod/
├ node_modules/
├ package.json
├ sass/
└ sprite/

---

// config.rb

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "/"
javascripts_dir = "js"
generated_images_dir = "img"
cache = false
output_style = (environment == :production) ? :compressed : :expanded
relative_assets = true
line_comments = (environment == :production) ? false : true

code_popup

---

// package.json

{
  "name": "temp_grunt",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
  "type": "git",
  "url": "[repository]"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "grunt": "~0.4.5",
  "load-grunt-tasks": "~0.5.0",
  "grunt-contrib-jshint": "~0.10.0",
  "grunt-contrib-concat": "~0.4.0",
  "grunt-contrib-uglify": "~0.5.0",
  "grunt-contrib-compass": "~0.8.0"
  }
}

code_popup

---

// Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({

    // for valiable
    pkg: grunt.file.readJSON('package.json'),


    // js: validate
    jshint: {
      beforeconcat: 'jsmod/mod/**/*.js'
    },

    // js: concat
    concat: {
      dist: 
        src: [
          'jsmod/lib/**/zepto-*.js',
          'jsmod/lib/**/*.js',
          '!jsmod/lib/**/jquery-*.js'
          'jsmod/src/**/*.js'
        ],
        dest: 'js/<%= pkg.name %>.js'
      }
    },

    // js: minify
    uglify: {
      dist: {
        src: '<%= concat.dist.dest %>',
        dest: 'js/<%= pkg.name %>.js'
      }
    },

    // compass config
    compass: {
      test: {
        options: {
          config: 'config.rb'
        }
      },
      release: {
        options: {
          config: 'config.rb',
          environment: 'production'
        }
      }
    },

  });


  require('load-grunt-tasks')(grunt, {pattern: ['grunt-contrib-*', 'grunt-shell']});

  grunt.registerTask('default', ['jshint', 'concat', 'compass:test']);
  // test用タスク - sassコンパイルはexpanded
  grunt.registerTask('r', ['jshint', 'concat', 'uglify', 'compass:release']);
  // release用タスク - sassコンパイルはcompressed, jsとcssはminify

};

code_popup

---

// タスクの実行(test)

grunt (default)
->
->Running "jshint:beforeconcat" (jshint) task
->>> 2 files lint free.
->
->Running "concat:dist" (concat) task
->File js/temp_grunt.js created.
->
->Running "compass:dist" (compass) task
->   create img/sprite/ja-***********.png
->   create img/sprite/en-***********.png
->   create css/temp_grunt.css (0.231s)
->Compilation took 0.232s
->
->Done, without errors.

---

// タスクの実行(release)

grunt r
->
->Running "jshint:beforeconcat" (jshint) task
->>> 2 files lint free.
->
->Running "concat:dist" (concat) task
->File js/temp_grunt.js created.
->
->Running "uglify:dist" (uglify) task
->File js/temp_grunt.js created: 56.1 kB → 25.18 kB
->
->Running "compass:release" (compass) task
->   create img/sprite/ja-***********.png
->   create img/sprite/en-***********.png
->   create css/temp_grunt.css (0.214s)
->Compilation took 0.215s
->
->Done, without errors.

temp_grunt
├ README
├ Gruntfile.js
├ base64/
├ config.rb
├ css/
├ html/
├ img/
├ js/
├ jsmod/
├ package.json
├ sass/
└ sprite/

---

// README

0) Introduce a virtual server to use php.
https://www.apachefriends.org/index.html

1) Install "sass".
$ sudo gem install sass

2) Install "compass".
$ sudo gem install compass

3) Install "node.js".
http://nodejs.org/

4) Install "grunt".
$ sudo npm install -g grunt-cli

5) Install "git".
http://git-scm.com/

a) Download and Unzip temp_grunt.zip.

b) Change label of folder name from 'temp_grunt' to 'your_project_name'.

c) Put this folder in your workspace.

workspace/
   └  your_project_name/

d) Enter top of this folder.

workspace/
   └  your_project_name/  <- current

e) Build the git project.
your_project_name $ git init
your_project_name $ git add -A
your_project_name $ git commit -m "first commit"

f) Change label from 'temp_grunt' to 'your_project_name' in 'html/conf.html' and 'package.json'.
your_project_name $ git grep -l temp_grunt | xargs sed -i '' -e 's/temp_grunt/your_project_name/g'

g) Change name of scss file.
your_project_name $ mv sass/temp_grunt.scss sass/your_project_name.scss

h) Install node_modules.
your_project_name $ sudo npm install

i) Run grunt.
your_project_name $ grunt