CSSの忘備録を作ろう

こんにちは、ミスターXです。

前回はSassの忘備録を作りましたので、今回はCSSの忘備録を作りましょう。


【1】スマホで画像保存を禁止するコード

jqueryを使って画像の上に透過GIFなどを乗せたりと色々な対応策はあるとは思うのですが、
一応いれておきましたよレベルでいい場合は下記を使います。

/* 画像保存禁止処理 */
section {
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
    -webkit-touch-callout:none;
}


【2】スマホでリンクを無効にするコード

これはタブボタンなどのナビでよく使います。

例えばナビボタン全てにリンクを付けて、該当ページのボタンだけリンク無効にすれば
わざわざリンクを消したり、リンクをつけたりしなくていいのでリンクミスも減らせたりします。

※注意点として段階リリースなどでリリース前にページがサーバにUPされていて
リンク先のURLはわかっているけど、
まだ公開はしないでねという時には使わないようにしましょう。
ソース見たらリンク先わかっちゃいますからねｗ

/* リンク無効 */
a {
    pointer-events:none;
    cursor:default;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}


【3】文字は透過せず、背景のみを透過する

これはボックス内のテキストには透過を適用せず背景のみを透過する場合に使います。

あまり使用頻度は高くないですが念のためにｗ

/* 文字は透過せず、背景のみを透過する */
section {
    background-color:rgba(赤,緑,青,数値);
}


【4】透過する

これはロールオーバー画像がない場合によく使いますね。

/* 透過する */
a:hover img {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
}


【5】文字が横幅より長い場合・・・として表示する

最近ではあまり使われなくなってますが、
横幅を超えた長い文字は・・・で表示させたい場合に使います。

/* 省略符号「…」をつける */
p {
    width:横幅;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}


【6】背景画像を複数重ねる

これは背景に複数の画像を使用したい場合に使います。

デザイン上どうしても背景を切り分けて複数してなくてはいけない場合に使うのですが
これもあまり使用頻度は高くないように思います。

※スマホで使用する場合は必ず背景の画像サイズは指定してあげましょう。

/* 背景を複数重ねる */
section {
    background-image:
    url(/img/top/pw_bottom.png),
    url(/img/top/pw_back.png);
    background-repeat:
    no-repeat,
    repeat-y;
    background-position:
    bottom left,
    top left;
    -webkit-background-size:100% auto;
    -moz-background-size:100% auto;
    -o-background-size:100% auto;
    -ms-background-size:100% auto;
    background-size:100% auto;
}


【7】パディングとボーダーを幅と高さに含める

これは指定した幅や高さの中にパディングとボーダーを含めて表示してくれます。

いちいち指定幅からパディングやボーダーの幅を引かなくてもいいので結構便利です。

Xはスマホでボックスにボーダーを使う場合には必ずいれています。

これを指定しておけば予期せぬブラウザの横ズレや段落ちなどをあらかじめ回避できたりします。

※この指定を後入れすると逆にレイアウトが崩れたりしますので注意です。

/* パディングとボーダーを幅と高さに含める */
section {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    border:solid 1px #ccc;
}


【8】ボックスの横並び

ボックスの横並び方法は色々あると思うのですが
スマホのページャーなどでよく使ってました。

ページャーはクライアントやディレクターによってはトリッキーな要求があったりしますので
下記を基本にして要求に合うようにコードを追加したりします。

※ページャーに関しては開発側で動的に表示させたりするので
コーディング前にデザインを基にして開発側と認識のすり合わせを行いましょう。

/* ボックスの横並び */
ul {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-o-box;
    display:box;
    width:100%; /* firefoxで横幅を広げる指定 */
}

li {
    width:100%;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -o-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
}


【9】角丸とボックスシャドウ

下記は角丸にボックスシャドウを指定した場合です。

昔のAndroid端末で角丸を使うとシャギー(ギザギザ）が出たりするので
ボックスシャドウと併用してシャギーが目立たないように調整したりします。

/* 角丸 */
section {
    -webkit-border-radius:10px 10px 10px 10px;
    -moz-border-radius:10px 10px 10px 10px;
    -ms-border-radius:10px 10px 10px 10px;
    -o-border-radius:10px 10px 10px 10px;
    border-radius:10px 10px 10px 10px;
    -webkit-box-shadow:#6e5525 0px 0px 2px 0;
    -moz-box-shadow:#6e5525 0px 0px 2px 0; /* color, h-offset, v-offset, blur, spread */
    -ms-box-shadow:#6e5525 0px 0px 2px 0; /* color, h-offset, v-offset, blur, spread */
    -o-box-shadow:#6e5525 0px 0px 2px 0; /* color, h-offset, v-offset, blur, spread */
    box-shadow:#6e5525 0px 0px 2px 0; /* is optional */
}


どうでしたでしょうか？
上記のように自分が過去にコーディングしたコードを忘備録として残しておいて、
いつでも使えるようにまとめておけばコピペして足りないコードを足したりすれば
作業時間が短縮できたりしますのでSassの忘備録と合わせて用意しておけば
意外と便利に使えるのではないでしょうか。



次回は「Photoshopのスライスを使わない書き出し方」です。






ブログ王ランキングに参加中！

Sassの便利な記法をまとめて忘備録にしよう

今回はSassの忘備録を準備しましょう。
Sassでコーディングをしていると、
どうしても使用頻度が少ないコードを忘れがちなので
いつでも使えるように自分なりにまとめて一覧を作ってみました。

まずはSassをCSSに変換してくれるサイトにアクセスしブックマークしておきましょう。

http://www.sassmeister.com/

SassがどのようにCSSに変換されるかが確認できます。

上記サイトの左側にSassを記述し、どのようにCSSに変換されるか
確認しながらSaaa忘備録一覧を作っていきます。


【以下からSassコード】

@charset "UTF-8";

/* &で親セレクタを参照 */
/*
.link ←参照される親セレクタ{
  background:#000;
  a & ←親セレクタを参照する記号 {
    color:#fff;
  }
}
*/
.link {
  background:#000;
  a & {
    color:#fff;
  }
}

/* クラスごとに書式を変更 */
ul li {
    line-height:1.4;
    &.first {
        color:#f00;
    }
    &.second {
        color:#ff0;
    }
    &.last {
        color:#0ff;
    }
}

/* ロールオーバー */
ul li {
    line-height:1.4;
    a {
        &:hover {
            text-decoration:underline;
        }
        &:active {
            color:#f00;
        }
    }
}

/* プロパティ名のネスト */
h1 {
    margin: {
        top:10px;
        right:20px;
        bottom:15px;
        left:0;
    }
    border: {
        left:solid 4px #f00;
        bottom:solid 1px #ddd;
    }
}

/* グローバル変数 */
$haba:1200px;
$iro:#fff;

#content-area {
    width:$haba;
    background:$iro;
}

/* 変数を使って文字列を指定 */
$f: "/img/icon/";

ul li {
    .first {
        background:url(#{$f}icon1.png) no-repeat 0 0;
    }
    .second {
        background:url(#{$f}icon2.png) no-repeat 0 0;
    }
    .last {
        background:url(#{$f}icon3.png) no-repeat 0 0;
    }
}

/* ローカル変数 */
div {
    $iro:#000;
    background:$iro;
    border:solid 1px $iro;
}

/* ローカル変数をグローバル変数にする場合 */
div {
    $iro:#fff !global;
    padding:20px;
}

p {
    color:$iro;
}

/* 数式を使った幅指定(300px) 記号の前後に半角スペ必須*/
$space:10px;
$waku:1px;

div {
    width:300px - ($space + $waku) * 2;
    padding:0 $space;
    border:solid $waku #000;
}

/* 割り算の場合は（）で囲む */
div {
  width:(300px / 2);
}

/* 変数と数式を使って三等分に分ける */
/* 三等分の数式
(幅 - スペースの幅 * スペースの数) / 分ける数
*/
#nav-area {
    $haba:900px;
    $space:15px;
    width:$haba;
    ul {
        width:$haba;
        position:relative;
        &:after {
            display:block;
            content:"";
            clear:both;
        }
    }
    li {
      float:left;
        width:($haba - $space * 4) / 3;
        margin: {
            left:$space;
        }
    }
}

/* よく使う書式を設定(透過例) */
@mixin touka {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
}

a:hover img {
    @include touka;
}


これで一通りのSass一覧ができましたので
適当に名前をつけたフォルダ（コーディングメモ等）を作ってその中にsass.scssファイルを作り
コード一覧をコピーし保存しておきましょう。


Sassには他にも便利な記法がたくさんありますので
使えそうだなという記法を見つけたら都度書き足したり修正していけばいいかと思います。



次回は「CSSの忘備録を作ろう」です(/・ω・)/






ブログ王ランキングに参加中！

gulpのメッセージ表示とエラー時監視を止めない（Windows）

今回はメッセージ表示とエラー時監視を止めないです。
下記サイトを参考にさせていただきました。

• gulp.jsで便利なタスクを作ってみよう【エラーと通知編】

【1】前回作成したsampleフォルダ内のgulpfile.jsを開きます。

下記を追記し

var notify = require('gulp-notify');
var plumber = require('gulp-plumber');

タスクを下記に修正します。

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass().on("error", sass.logError))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'Sassをコンパイルしました。',
            message:new Date()
       }));
});

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'HMTLをコンパイルしました。',
            message:new Date()
       }));
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'JSをコンパイルしました。',
            message:new Date()
       }));
});


（追記＆修正後）
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
var imagemin = require('gulp-imagemin');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');


gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass().on("error", sass.logError))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'Sassをコンパイルしました。',
            message:new Date()
       }));
});

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'HMTLをコンパイルしました。',
            message:new Date()
       }));
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'JSをコンパイルしました。',
            message:new Date()
       }));
});

//img
gulp.task('jpg', function() {
    gulp.src('gulp/**/*.jpg')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('png', function() {
    gulp.src('gulp/**/*.png')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('default', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });
    gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
    gulp.watch(['gulp/**/*.html'],["html"]);
    gulp.watch(['gulp/**/*.js'],["js"]);
    gulp.watch(['gulp/**/*.jpg'],["jpg"]);
    gulp.watch(['gulp/**/*.png'],["png"]);
});

※追記したら保存を忘れないようにｗ


【2】通知プラグインをインストール

コマンドプロントでsampleディレクトリまで移動します。

※コマンドプロントにcdと半角スペースを記述してsampleフォルダをドラッグ＆ドロップでエンター

（コマンドプロンプト表示例）
C:\Users\（ユーザ名）\Desktop\sample>

続いて下記コマンドを入力します。

※もしgulpが実行中なら終了させてから入力してください。

（入力コマンド）
npm i gulp-notify --save-dev


【3】エラー時監視を止めないプラグインをインストール

続けて下記コマンドを入力しましょう。

（入力コマンド）
npm i gulp-plumber --save-dev


【4】動作確認

（入力コマンド）
gulp


作業フォルダ内(gulpフォルダ)のhtmlとscssを修正し、保存後、
デスクトップの右上にメッセージが表示されればOK

続いてscssファイルに適当に文字列をいれて、エラーを出してみましょう。

例えば下記みたいにいれてみてください。

p {
    background:#f00;
}

aaaaaaaaaaa

するとデスクトップの右上にエラーが表示され
コマンドプロントにもエラーが表示されましたでしょうか？

文字列のaaaaaaaaaaaを削除し、再度保存してみましょう。

右上にコンパイルメッセージが表示されればOK。


これでgulpで下記の事ができるようになりました。

• SassからCSSへの自動変換
• 書き出したCSSの見た目調整
• ベンダープレフィックス自動付与
• ブラウザ同期
• 画像圧縮
• メッセージ表示
• エラー時監視を止めない

まだまだ便利なプラグインがあるのですがとりまこれでgulpを使ったコーディング環境が整いました。




次回は「Sassの便利な記法をまとめて忘備録にしよう」です(/・ω・)/





ブログ王ランキングに参加中！

gulpで画像圧縮してみた（Windows）

今回はgulpで画像を自動圧縮してみましょう。
下記サイトを参考にさせていただきました。

• gulpで簡単画像圧縮

前回は結構ボリュームがあったので今回はサクッといってみましょう(∩´∀｀)∩


【1】前回作成したsampleフォルダ内のgulpfile.jsを開きます。

下記を追記します。

var imagemin = require('gulp-imagemin');

と

//img
gulp.task('jpg', function() {
    gulp.src('gulp/**/*.jpg')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('png', function() {
    gulp.src('gulp/**/*.png')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

と

gulp.watch(['gulp/**/*.jpg'],["jpg"]);
gulp.watch(['gulp/**/*.png'],["png"]);

を追記します。

（追記後）
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
var imagemin = require('gulp-imagemin');

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(sass())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
        .pipe(browserSync.stream());
});

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
});

//img
gulp.task('jpg', function() {
    gulp.src('gulp/**/*.jpg')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('png', function() {
    gulp.src('gulp/**/*.png')
        .pipe(imagemin())
        .pipe(gulp.dest('html/'))
        .pipe(browserSync.stream());
});

gulp.task('default', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });
    gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
    gulp.watch(['gulp/**/*.html'],["html"]);
    gulp.watch(['gulp/**/*.js'],["js"]);
    gulp.watch(['gulp/**/*.jpg'],["jpg"]);
    gulp.watch(['gulp/**/*.png'],["png"]);
});

※追記したら保存を忘れないようにｗ


【2】画像圧縮プラグインをインストール

コマンドプロントでsampleディレクトリまで移動します。

※コマンドプロントにcdと半角スペースを記述してsampleフォルダをドラッグ＆ドロップでエンター

（コマンドプロンプト表示例）
C:\Users\（ユーザ名）\Desktop\sample>

続いて下記コマンドを入力します。

（入力コマンド）
npm install gulp-imagemin --save-dev

インストール後にgulpと入力し実行しましょう。


【3】gulpフォルダ（作業フォルダ）内のimgフォルダに適当にネットから落としてきた画像を格納します。

下記サイトの写真（JPG）とベクター画像（PNG）を適当に落としてきましょう。

無料の写真 - Pixabay

jpgとpng画像を落としたらimgフォルダに格納します。

格納後コマンドプロントに圧縮％など表示され、
htmlフォルダ（出力フォルダ）にimgフォルダと圧縮された画像が出力されていればOK

これで作業フォルダ内のimgフォルダに画像を格納した時に
自動で出力フォルダに圧縮画像を生成してくれるようになりました。



次回は「gulpのメッセージ表示とエラー時監視を止めない（Windows）」です。






ブログ王ランキングに参加中！

便利なgulpプラグインをいれてみた（Windows）

前回の記事「gulpとSassのインストール方法（Windows）」からの続きです。

今回は作業フォルダと出力フォルダを分けて
ブラウザ自動更新など便利なgulpプラグインをいれてみましょう。

自分用にメモった物なので詳しくは下記サイトをご覧ください。

• gulp-sassのコンパイル後のcssをいつもの見た目にしたい
• [htmlコーディング] gulpを利用してコーディング時に（複数）ブラウザをオートリロードする
• vendor prefix, minify, 開発/本番用ビルドの切り替え... CSSのあれこれをGulpにさせてみた
• gulp.jsで便利なタスクを作ってみよう【デバッグ編】
• gulp.jsで便利なタスクを作ってみよう【エラーと通知編】

「ベンダープレフィックスを自動付与」

1．まずはSassからCSSにコンパイルした時に
ベンダープレフィックスを自動で付与させてみよう(｀･ω･´)

----------------------------------------------------
＞ベンダープレフィックスを自動付与
----------------------------------------------------

【1】下記コマンドプロントを入力

前回作ったpackage.jsonファイルが置いてあるディレクトリ(sampleフォルダ)に
コマンドプロンプトの階層を移動し
下記コマンドを入力しましょう。

(コマンド入力)
npm install gulp-autoprefixer --save-dev


【2】gulpfile.jsにタスクを追記

var autoprefixer = require("gulp-autoprefixer");
と
.pipe(autoprefixer({browsers: ['last 4 version', 'ie >= 6', 'Android 4.0']}))
を追記
※一通りのブラウザに対応させる記述です。

(追記後)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 4 version', 'ie >= 6', 'Android 4.0']}))
        .pipe(gulp.dest("./css"));
});


【3】style.scssに以下を記述（動作確認）

h1 {
    color: red;
    transition: 200ms ease-out transform;
    &:hover {
        color: blue;
        transform: translate(10px,0);
  }
}


【4】動作確認

コマンドプロントに下記を入力

(コマンド入力)
gulp sass

style.cssに下記が書き出されていればOK

h1 {
  color: red;
  -webkit-transition: 200ms ease-out transform;
  transition: 200ms ease-out transform; }
  h1:hover {
    color: blue;
    -webkit-transform: translate(10px, 0);
            transform: translate(10px, 0); }
※ベンダープレフィックスをつけてくれない場合もあるので
IEなどのブラウザで確認して反映されていなければ自分でつけましょうｗ

【おまけ】
コンパイルされたCSSの見た目を整えよう。

gulpfile.jsに下記タスクを追記

.pipe(sass({outputStyle: 'expanded'}))

(追記後)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./css"));
});

コマンドプロントに下記を入力

(コマンド入力)
gulp sass

style.cssが下記に変更されていればOK

h1 {
  color: red;
  -webkit-transition: 200ms ease-out transform;
  transition: 200ms ease-out transform;
}

h1:hover {
  color: blue;
  -webkit-transform: translate(10px, 0);
          transform: translate(10px, 0);
}


2．続いて作業ファイルと出力ファイルを分けよう

作業するファイルとgulpで出力されるファイルを別で管理するために
ディレクトリ構成を変更していきます。


----------------------------------------------------
＞作業フォルダを作成
----------------------------------------------------

【1】sampleフォルダ内にgulpフォルダを作ります。

【2】gulpフォルダ内にsassフォルダを移動します。

【3】続いてhtmlファイルとjsフォルダ、imgフォルダを作ります。

gulpフォルダ内は以下のようになりました。

※HTMLファイルにはCSSやJSのリンクの設定を忘れずに！

(HTMLソース)
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>テスト</title>
</head>

<body>
<p>自動更新テスト</p>
</body>
</html>


【4】gulpfile.jsのタスクを修正

（変更前）
gulp.src("sass/**/*scss")

（変更後）
gulp.src("gulp/sass/**/*scss")


----------------------------------------------------
＞出力フォルダを作成
----------------------------------------------------

【1】sampleフォルダ内にhtmlフォルダを作ります。

【2】sampleフォルダ内のcssフォルダを削除します。

【3】gulpfile.jsのタスクを修正

（変更前）
.pipe(gulp.dest("./css"));

（変更後）
.pipe(gulp.dest("./html/css"));

変更後の全体は下記のようになります。

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(sass())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"));
});


【4】動作確認

コマンドプロントに下記を入力

(コマンド入力)
gulp sass


htmlフォルダにcssディレクトリとstyle.cssが生成されていばOK



3．続いて作業フォルダ（gulpフォルダ）内のファイルを変更した時にブラウザを同期し自動で更新できるようにしてみましょう。

----------------------------------------------------
＞自動更新
----------------------------------------------------

【1】下記コマンドプロントを入力

(コマンド入力)
npm install browser-sync --save-dev

※コマンドプロンプトの階層がsampleになっているを前提としています。


【2】gulpfile.jsにタスクを追記

var browserSync = require("browser-sync");
と
.pipe(browserSync.stream());
と
gulp.task('default', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });
    gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
});

を追記


(追記後)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(sass())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });
    gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
});


【3】動作確認

コマンドプロントに下記を入力

(コマンド入力)
gulp

上記コマンドを入力後に自動でブラウザが立ち上がればOK。


【4】作業ファイルの修正が自動でブラウザに反映されているか確認

gulpfile.jsに下記タスクを追記

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
});

gulp.watch(['gulp/**/*.html'],["html"]);
gulp.watch(['gulp/**/*.js'],["js"]);


(追記後)

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(sass())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
        .pipe(browserSync.stream());
});

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
});

gulp.task('default', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });
    gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
    gulp.watch(['gulp/**/*.html'],["html"]);
    gulp.watch(['gulp/**/*.js'],["js"]);
});

コマンドプロンプトでctrl + cを押してyで終了し、
再度gulpを入力しましょう。

gulpフォルダ内のsassファイルやhtmlファイルを修正保存して
ブラウザに自動で反映されればOK。

これで作業フォルダ内にファイルを追加したり修正すれば
自動で更新しブラウザに反映してくれるようになりました。

※自動更新が効かなかったりした場合はコマンドプロンプトを終了し
再度gulpを入力し動かしてみましょう。


次回は「gulpで画像圧縮してみた（Windows）」です。






ブログ王ランキングに参加中！

gulpとSassのインストール方法（Windows）

今回はgulpとSassのインストール方法（Windows）を書いていきたいと思います。
自分用にメモった物なので詳しくは下記サイトをご覧ください。

• タスクランナー「gulp」の導入手順（Windows）
• 動画キャプチャで解説！gulp.jsのインストール方法と簡単な使い方

「gulpインストール方法」

1．まずはNode.jsをインストールしましょう。

 ----------------------------------------------------
＞ Node.jsをインストール
----------------------------------------------------

【1】下記URLのNode.jsページからインストール

http://nodejs.org/


【2】Node.jsのバージョンを確認
※コマンドプロンプトにコマンドを入力

(コマンド)
node -v

バージョン番号が表示されればOK



2．続いてgulpをインストールしましょう。

----------------------------------------------------
＞ gulpインストール
----------------------------------------------------

【1】下記コマンドをコマンドプロンプトに入力

(コマンド)
npm install -g gulp


【2】フォルダを作成

例）デスクトップにsampleフォルダを作成した場合のパス

C:\Users\（ユーザ名）\Desktop\sample（sampleフォルダを作成）


【3】次にコマンドプロンプトでsampleフォルダの階層まで移動

cd 階層へのパス

(コマンドプロンプト入力例)
cd \Users\（ユーザ名）\Desktop\sample

※cd （←半角スペースも）を入力し、sampleフォルダをコマンドプロンプトにドラッグ＆ドロップしても入力できます。

入力したらコマンドプロントでエンターを押してくださいｗ

(移動後のコマンドプロンプト表示例)
C:\Users\（ユーザ名）\Desktop\sample>


【4】gulpのバージョンを確認

(コマンド入力)
gulp -v

以下のような表示が出てくると成功

(表示コマンド)
[gulp] CLI version 3.9.1


【5】Localにもgulpをインストール
※【2】で作成したsampleフォルダにインストール

(コマンド)
npm install gulp@3.9.1 --save-dev
※【4】で確認したバージョンと数字を合わせる(3.9.1)
※バージョンを記述しないとなぜかエラーがでたため


【6】再度gulpのバージョンを確認

(コマンド入力)
gulp -v

以下のような表示が出てくると成功

(表示コマンド)
[gulp] CLI version 3.9.1
[gulp] Local version 3.9.1

※sampleフォルダ内にnode_modulesフォルダが作成されていればOK



3．続いてpackage.jsonを作成しましょう。

----------------------------------------------------
＞package.jsonの作成
----------------------------------------------------

【1】gulpインストール【2】で作成したフォルダにpackage.jsonを作成
※コマンドプロンプトにコマンドを入力

(コマンド入力)
npm init

※コマンドが入力できる状態になるまでエンター(とりあえずね)

※sampleフォルダ内にpackage.jsonファイルが作成されていればOK



4．続いてgulpfile.jsファイルを作成しましょう。

----------------------------------------------------
＞gulpfile.jsの作成
----------------------------------------------------

sampleフォルダにgulpfile.jsファイルを新規作成し
以下を記述

(記述内容)

var gulp = require("gulp");



5．最後にSassコンパイルプラグインをインストールしましょう。

----------------------------------------------------
＞Sassのコンパイル
----------------------------------------------------

【1】Sassコンパイルプラグインをインストール
※コマンドプロンプトにコマンドを入力

(コマンド入力)
npm install gulp-sass --save-dev


【2】sampleフォルダにsassフォルダを作成しstyle.scssファイルを新規作成する

例）sassフォルダとstyle.scssを作成した場合のパス
C:\Users\（ユーザ名）\\Desktop\sample\sass\style.scss


【3】style.scssに下記を記述（動作確認用）

h1 {
  color: red;
  &:hover {
    color: blue;
  }
}


【4】gulpfile.jsにSassをコンパイルするタスクを追記

var gulp = require("gulp");
の下に下記を追記

var sass = require("gulp-sass");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});


【5】動作確認

コマンドプロントに下記を入力

(コマンド入力)
gulp sass


sampleフォルダにcssディレクトリとstyle.cssが生成され
下記cssが記述されていばOK

h1 {
  color: red; }
  h1:hover {
    color: blue; }



ここまででとりまgulpとsassの設定は完了です。

多少手間取りましたが何とかインストールできました。

※エラーが解決できなくて一回あきらめたのは内緒でｗ

今回作成したsampleディレクトリは下記のようになりました。




次回は「便利なgulpプラグインをいれてみた（Windows）」です。







ブログ王ランキングに参加中！