Help us understand the problem. What is going on with this article?

初めてのGulp入門 ~gulpfile入門~

More than 3 years have passed since last update.

前提条件

下記はすでにインストールと仮定

  • gulp

また、下記の記事を完了していることを想定

http://qiita.com/y_sekitoba/private/ca8f582dbf437afdbf1d

プラグインの利用とgulpfileの書き方

今回は、「gulp-sass」というプラグインを利用してインストールからgulpfileの書き方を説明していきます。

前回の記事が完了している方は、gulpfile.jsというファイル(中身は空)は作成済みのはずですので、ここに設定を記述しながら実際にgulp-sassプラグインを利用できるようにしていきましょう。

◆gulp-sassプラグインとは?

下準備

今回、gulp-sassプラグインを実際に利用するために下準備を行います。

◆HTMLファイルの作成

下記のコマンドを実行してファイルを作成。

// publicというディレクトリを作成
$ mkdir public

// publicディレクトリの中にindex.htmlファイルを作成
$ touch public/index.html

作成したindex.htmlというファイルに下記を貼り付け

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>エフゼロ勉強会</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
   <h1>エフゼロ勉強会</h1>
</body>
</html>

これで事前準備は終了です。

プラグインのインストール

ではまずは今回利用するgulp-sassプラグインをインストールしていきます。

インストールは下記のコマンドを実行すれば完了です。
※前回gulpをインストールしたディレクトリ(gulp_lessonディレクトリ)にいる前提です。

// npmを利用してgulp-sassをインストールする
$ npm install gulp-sass

gulpfile.jsに設定を記述

gulp-sassプラグインを利用できるようにgulpfile.jsに設定を記述してきます。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

// sassコンパイルタスク
gulp.task('sass-compile', function(){
  return gulp.src('./dev/style.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./public/style.css'));
});

// gulpのデフォルトタスクとしてsass-compaileタスクを指定
gulp.task('default', ['sass-compile']);

上記を記述後、保存してください。
※詳しい説明は後半でしています。

scssファイルの作成

では実際に、gulp-sassプラグインを利用してsassファイルをcssファイルに変換してみましょう。

まずsassファイルを作成します。

// devというディレクトリを作成
$ mkdir dev

// devディレクトリの中にindex.htmlファイルを作成
$ touch dev/style.scss

作成したstyle.scssファイルの中に書きを記述

style.scss
body {
    background-color: red;

    & h1 {
        color: bule;
    }
}

実行

最後にgulpを利用してsassファイルをcssに変換してみましょう。

下記のコマンドを実行してください。

$ gulp

これでgulpとgulp-sassを利用できるようになりました。
ただ、現状ではgulpのよさを実感できないのでより実務に使える形にしていきます。

プラグインを追加していく

ここまでで作成したファイルをさらに便利にしていきましょう。

現状、下記のパッケージが入っています。

  • gulp
  • gulp-sass

ここではさらに便利にしていくために下記のパッケージを導入します。

  • gulp-autoprefixer =>
  • gulp-csscomb =>
  • gulp-plumber =>
  • browser-sync =>

◆パッケージのインストール

まずはnpmを利用してパッケージをインストールして使用できるようにしていきます。

// npmを利用してインストール(半角スペースを入れることで複数をまとめて指定することも可能)
$ npm install gulp-autoprefixer gulp-csscomb gulp-plumber browser-sync

◆gulpfile.jsのカスタマイズ

パッケージのインストールが完了したので実際に利用できるようにgulpfile.jsをカスタマイズしていきます。
最終的に下記のようになります。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var plumber = require('gulp-plumber');
var browser = require('browser-sync');


// sassコンパイルタスク
gulp.task('sass-compile', function(){
  return gulp.src('./dev/style.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./public/style.css'));
});

// gulpのデフォルトタスクとしてsass-compaileタスクを指定
gulp.task('default', ['sass-compile']);


では少しづつ解説していきます。
ポイントを押さえてしまえばある程度カスタマイズができるようになりますので少しづつ慣れていきましょう。

こちらもどうぞ

新人の指導者 or 新人の方へ

y_sekitoba
異業種からweb業界へ転職。 基本的に備忘録がメインです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした