gulpでscssファイルをコンパイルしライブリロードするまで

31127 ワード

gulp gulpplugin gulp テキストリンク

追記

2019/08/01
- 今更ですがgulp-minify-css が非推奨となったためgulp-clean-cssを使うように修正しました。
- この記事は、gulpのv3系の書き方でv4には対応していません。（近いうちにv4系記事に書き直したいと思います。

環境

npm
gulp: 3.x.x

事前準備

npmでインストールしていきます
ディレクトリ構成は以下のような構成を想定しています

gulp_test/
　├ package.json
　├ gulpfile.js
　├ index.html
　└ sass/hoge.scss

1. gulpでhello worldする

gulpをインストール

# gulpをインストール
$ npm i gulp
# gulpのバージョン確認
$ gulp　-v

gulpfile.jsを修正

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('hello world!');
});

gulpの実行

$ gulp

Starting 'default'...
hello world
Finished 'default' after 121 μs

2. gulp-sassでscssファイルをcssにコンパイルする

gulp-sassをインストール

# gulp-sassをインストール
$ npm install gulp-sass

gulpfile.jsを修正

gulpfile.js

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

gulp.task('default', ['sass']);

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

gulpの実行

$ gulp

css/hoge.cssが作成されます。

3. gulp-clean-cssでminifyする

gulp-clean-cssとgulp-renameをインストール

gulp-clean-cssは、cssファイルminifyするために使います。
gulp-renameは、*.min.cssというファイル名にするために使います。

# gulp-clean-css gulp-renameをインストール
$ npm install gulp-clean-css gulp-rename

gulpfile.jsを修正

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

gulp.task('default', ['sass']);

gulp.task('sass', function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(rename({extname: '.min.css'})) // ファイル名を変える
        .pipe(cleanCss()) // minifyする
        .pipe(gulp.dest('./css'));
});

gulpの実行

$ gulp

css/hoge.min.cssが作成されます。

4. gulp-sourcemapsでsourcemapを作成する

gulp-sourcemapsをインストール

# gulp-sourcemapsをインストール
$ npm install gulp-sourcemaps

gulpfile.jsを修正

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var sourcemaps = require("gulp-sourcemaps");

gulp.task('default', ['sass']);

gulp.task('sass', function() {
    gulp.src("sass/**/*scss")
        .pipe(sourcemaps.init()) //sassの前に.init()する
        .pipe(sass())
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write("./")) //destの前に.write()する
        .pipe(gulp.dest('./css'));
});

gulpの実行

$ gulp

css/hoge.min.css.mapが作成されます。

5. gulp-watchでファイルの更新を監視する

gulp-watchをインストール

# gulp-watchをインストール
$ npm install gulp-watch

gulpfile.jsを修正

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var sourcemaps = require("gulp-sourcemaps");
var watch = require('gulp-watch');

gulp.task('default', ['watch']);

gulp.task('sass', function() {
    gulp.src("sass/**/*scss")
        .pipe(sourcemaps.init()) //sassの前に.init()する
        .pipe(sass())
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss({advanced:false}))
        .pipe(sourcemaps.write("./")) //destの前に.write()する
        .pipe(gulp.dest('./css'));
});

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

gulpの実行

$ gulp

hoge.scssを変更すると自動でcss/hoge.cssが作成されます。
しかし、スタイルシートがシンタックスエラーになると止まってしまいます。

6. gulp-plumberでwatch中のエラーで止まらないようにする

gulp-plumberをインストール

# gulp-plumberをインストール
$ npm install gulp-plumber

gulpfile.jsを修正

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var sourcemaps = require("gulp-sourcemaps");
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');

gulp.task('default', ['watch']);

gulp.task('sass', function() {
    gulp.src("sass/**/*scss")
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest('./css'));
});

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

gulpの実行

$ gulp

これで、スタイルシートがシンタックスエラーになっても止まりません。

7. browser-syncでファイルが更新したらリロードを行う

browser-syncをインストール

# browser-syncをインストール
$ npm install browser-sync

gulpfile.jsを修正

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var sourcemaps = require("gulp-sourcemaps");
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();

gulp.task("default", ["browser-sync","sass"] ,function () {
    browserSync.reload;
});

gulp.task('sass', function() {
    gulp.src("sass/**/*scss")
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest('./css'));
});

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

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "http://localhost/gulp_test",
        port: 3000,
    });
});

gulpの実行

$ gulp

ブラウザで http://localhost:3000/gulp_test が開きます。
hoge.scssを変更すると自動でリロードされます。

以上です。

Author And Source

この問題について(gulpでscssファイルをコンパイルしライブリロードするまで), 我々は、より多くの情報をここで見つけました https://qiita.com/suisui654/items/c8439e9221fedb49ca2d

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

4.リニアテーブルの静的チェーンテーブル(ポインタを外したシングルチェーンテーブル)

CodeForces EDU 89 div.2 D