gulpfile 設定例
var gulp = require('gulp');
var browserSync = require('browser-sync');
var compass = require('gulp-compass');
var reload = browserSync.reload;// Start the server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./",
index: "test-index.html"
}
});
});// compass
gulp.task('compass', function(){
gulp.src('sass/**/*.scss').pipe(compass({
config_file: 'config.rb',
comments: true,
css: '_css/',
sass: 'sass/'
}))
.pipe(browserSync.reload({stream:true}));
});// watch
gulp.task('watch', function(){
gulp.watch('sass/**/*.scss', function(event) {
gulp.run('compass');
});
});gulp.task('default', ['browser-sync', 'compass'], function () {
gulp.watch("sass/*.scss", ['compass']);
gulp.watch("*.css").on("change", browserSync.reload);
gulp.watch("*.html").on("change", browserSync.reload);
});/*
gulp.task('default', function(){
gulp.run('watch');
});/
reactjs 備忘録
$ /projects/react-test/
$ react -v
bash: react: command not found$ /projects/react-test/
$ npm install react --save
npm WARN ts@1.0.0 No description
npm WARN ts@1.0.0 No repository field.$ /projects/react-test/
$ npm install react --save-dev
npm WARN ts@1.0.0 No description
npm WARN ts@1.0.0 No repository field.$ /projects/react-test/
$ npm i -g react-tools
npm WARN deprecated react-tools@0.13.3: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated
C:\Users\AppData\Roaming\npm\jsx -> C:\Users\AppData\Roaming\npm\node_modules\react-tools\bin\jsx
C:\Users\AppData\Roaming\npm
`-- react-tools@0.13.3
`-- commoner@0.10.8
+-- detective@4.5.0
| `-- acorn@4.0.13
+-- glob@5.0.15
| `-- minimatch@3.0.4
| `-- brace-expansion@1.1.8
| `-- balanced-match@1.0.0
+-- iconv-lite@0.4.18
+-- q@1.5.0
`-- recast@0.11.23
`-- ast-types@0.9.6
$ /projects/react-test/
$ jsx --harmony --watch src/ build/
["hello"]
hello.js changed; rebuilding...
built Module("hello")
["hello"]
VagrantとVirtualBoxでローカル開発環境を構築
VirtualBox
https://www.virtualbox.org/wiki/Downloads
Vagrant
http://downloads.vagrantup.com/
VirtualBoxは既にインストールされていたバージョン4.3.6を使用。
Vgrantは現時点での最新版1.3.5をダウンロード。
その他基本的なことは下記が詳しい(丸投げ)
http://www.webopixel.net/develop/835.html
共有フォルダ作るには下記コマンドを実行。
/var/www/htmlへシンボリックリンクすればよい。
sudo rm -rf /var/www/html
sudo ln -fs /vagrant /var/www/html
Windows環境でgccコンパイラを使用する(メモ)
忘れそうなのでメモ。
コンパイルするには下記コマンドを実行。
$ cd /work_directory $ gcc -o hello hello.c
意味は、hello.cというファイルをhelloという実行ファイルに
コンパイルして出力するということらしい。
gccのオプションについてはここが参考になった。
http://kazmax.zpp.jp/cmd/g/gcc.1.html
HTML・CSS コーティング規約参考サイト
HTML・CSS コーティング規約参考サイト
【参考】
google(英語)
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
apple(英語)
http://www.apple.com/html5/
google(和訳)
http://re-dzine.net/2012/05/google-htmlcss-style-guide/
CSSガイドライン
http://2xup.org/log/2006/07/11-1956
http://www.i-seeds.jp/web/cssguideline.html
HTMLガイドライン
http://www.okapiproject.com/web/html_codeconventions/index.html
Class名・ID名の付け方
http://css-happylife.com/archives/2007/0115_1345.php
http://matome.naver.jp/odai/2133510305809813901
jQueryによるスクロール距離の取得方法
jQueryによるスクロール距離の取得方法。
パララックスサイトの作成、ページトップリンクを表示制御、グローバルナビの表示制御など使いドコロがいろいろあると思うのでメモ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール位置の取得</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> </head> <body> <script> $(function() { $(window).scroll(function() { var dy = $(this).scrollTop(); if(dy > 100){ //処理 }else{ //処理 } }); }); </script> </body> </html>
参考サイト:ドットインストール
#03 スクロール距離を取得しよう
http://dotinstall.com/lessons/parallax_html/10903
JavaScriptでグローバル変数の定義を最小限にする
グローバル変数にvar cnf = {}と定義したあと、
それをアプリケーションのコンテナとして利用することで、
グローバル変数がぶつかる危険性を最小限にする。
下記はブラウザに「Hello World」と出力するスクリプト。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello world</title> <script> window.onload = function() { /** *メンテナンス性を良くするため *グローバル変数は1つだけ定義する。 */ var cnf = {}; //newで生成しても良い。 cnf.elem = { para : document.createElement("p"), testDiv : document.getElementById("test"), text : document.createTextNode("Hello World") }; cnf.elem.testDiv.appendChild(cnf.elem.para); cnf.elem.para.appendChild(cnf.elem.text); } </script> </head> <body> <div id="test"></div> </body> </html>
やっとユーザ定義オブジェクトについて分かってきた(かもしれない)。
参考:JavaScript The GoodParts