Pocket

今回はhtmlとcssをより簡潔に書く方法をご紹介します。

ずばりその方法とは『pug（パグ）』と『sass（サス）』の導入です。

一言でいえば

pugはhtmlを簡単に書く言語

sassはcssを簡単に書く言語

です。

それでは早速、pugとsassを導入する手順を説明しましょう。

①『node.js(ノード．ジェイエス)』をダウンロードし、インストール

https://nodejs.org/ja/より、推奨verをダウンロードしインストール

node.jsとはphpなどのようにサーバー上で動くjavascript環境です。(通常javascriptはブラウザ上で動きます)

※node.jsをインストールするとnpmも同時インストールされます

②『gulp』をグローバルインストール(コマンドプロンプト)

コマンドプロンプトを起動し、次の記述を打ち込みエンターキー

npm i --global gulp-cli

※グローバルインストールとローカルインストールを混同しないように注意

※コマンドプロンプトでgulpと打つだけでタスクを実行できるようにインストール

③『package.json』を作成(コマンドプロンプト)

cd+(半角スペース)を記述し、コマンドプロンプト上にプロジェクトファイルをドラッグアンドドロップし、エンターキー

cd プロジェクタファイル

コマンドプロンプトの指定フォルダが移動したら、次の記述を打ち込みエンター

npm init -y

※プロジェクトファイルの中にpackage.jsonファイルが作成されます。

※package.jsonにはインストールしたパッケージ情報が記載されます。

④『gulp』をローカルインストール(コマンドプロンプト)

次の記述を打ち込みエンターキー

npm i -d gulp

※プロジェクトファイル内でgulpを使用するためにローカルにインストールしています

※ローカルインストールしたファイルはnode_modulesフォルダに保管されます

※package-lock.jsonファルダが生成されますが、そのまま放置で問題ありません(私も勉強中で上手く説明できません。気になる方はググってみてね)

⑤『gulpfile.js』を作成

プロジェクトフォルダにgulpfile.jsを作成(下のコード中身)

//plug-inインストールしたプラグインを定義
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');
var sass = require("gulp-sass");
var pug = require('gulp-pug');

//sassの仕事 
gulp.task("sass", function() {
    gulp.src("sass/**/*.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest("www/css"));
});

//pugの仕事
gulp.task("pug", function() {
    gulp.src("pug/**/*.pug")
        .pipe(plumber())
        .pipe(pug())
        .pipe(gulp.dest("www"));
});

//watchの仕事
gulp.task('watch', function(){
    gulp.watch('sass/**/*.scss', ['sass']);
    gulp.watch('pug/**/*.pug', ['pug']);
});

//task実行
gulp.task('default', ['sass', 'pug', 'watch']);

※コンピュータにやらせる仕事を記述しています

・pugの仕事

pugフォルダ以下にある全ての.pngファイルを対象に、コンパイルをして、wwwフォルダに保存してねって命令

・sassの仕事

sassフォルダにある全ての.scssファイルを対象に、コンパイルをして、wwwファルダ中のcssフォルダに保存してねって命令

※gulp-autoprefixerの記述が足りませんでした。最新版は別記事に載せています。(2019/02/16更新)

※gulpフォルダ構成を2パターンまとめました。(2019/10/13更新)

pugで効率化【実用編3】

pugで効率化【実用編4】

・watchの仕事

sassフォルダにある全ての.scssファイルを対象に監視を行って、変更があったら「sassの仕事」をしてねって命令

pugフォルダにある全ての.pugファイルを対象に監視を行って、変更があったら「pugの仕事」をしてねって命令

・taskの実行

コマンドプロンプトでgulpって書いてエンター押したら、sass、pug、watchを開始してね命令

※プロジェクトファイルの構成内容

(テキストエディタ上に書いてるけど、説明し易いからここに書いてるだけなので、下を参考に各自フォルダを作ってみてね)

プロジェクトファイル
|___ package.json
|___ package-lock.json
|___ gulpfile.js
|___ node_modules
|___ pug
|    |___ index.pug
|___ sass
|    |___ test.scss
|___ www
     |___ css

index.pugの中身

doctype html
html(lang='ja')
    head
        meta(charset="utf-8")
        title タイトル
        link(rel="stylesheet", href="css/test.css",)
    body
        .div
            h1.hello helloWorld!
            p.moji mojimoji

test.scssの中身

.div {
  background-color: #eaeaea;
  padding: 20px;
  height: 200px; }

.hello{
  color: green;
}

.moji {
  color: white;
  background-color: red;
}

⑥パッケージをローカルにインストール(コマンドプロンプト)

gulpfile.jsに記載したプラグイン(便利機能)をローカルインストールします。

・gulp-plumber(エラーがあってもgulpを停止させない)をローカルにインストール

npm i -d gulp-plumber

・gulp-autoprefixer(ベンダープレフィックスと呼ばれるめんどくさい記述を自動化)をローカルにインストール

npm i -d gulp-autoprefixer

・gulp-sass(sassをcssに変換)をローカルにインストール

npm i -d gulp-sass

・gulp-pug(pugをhtmlに変換)をローカルにインストール

npm i -d gulp-pug

※この他にも便利なプラグインがたくさん用意されています。

⑦task実行(コマンドプロンプト)

gulpを記述し、エンターでgulpfile.jsに記述した内容が実行される

gulp

・gulp起動後はテキストエディタ上で　ctrlキー + Bキー　でgulpを起動更新できます。

・gulpを停止させるときはコマンドプロンプトを消してOKです

※gulp起動後のプロジェクトファイルの構成

プロジェクトファイル
|___ package.json
|___ package-lock.json
|___ gulpfile.js
|___ node_modules
|___ pug
|    |___ index.pug
|    |___ index.html
|___ sass
|    |___ test.scss
|___ www
     |___ css
     |    |___ test.css
     |___ index.html

作成されたinde.htmlをブラウザ確認してみましょう。こんな感じに表示されれば成功です。