地に足をつけずに世界を生き抜くブログ

gulp+sassを使ってポートフォリオサイトを制作する

こんにちは。今日はポートフォリオサイトをリニュアールしてみようと思います。開発環境は、gulpでsassをコンパイルしていくやり方にします。それではまずはプロジェクトフォルダを作成して、gulpを入れていきましょう。

プロジェクトフォルダを作成、gulpをインストールする

mkdir heyassyme
cd heyassyme
npm init -y
npm i gulp gulp-sass
touch index.html
mkdir css sass

ここまで出来たらフォルダ構造はこんな感じです。つぎはscssを書いていき、gulpにコンパイルしてもらいましょう。

gulpタスクの作成

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

gulp.task('default' ,() => {
    return(
        gulp
        .src('sass/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'))
    );
});

Scssで書いたコードをcssに変換するタスクです。この場合だと、sassフォルダにあるscssをcssフォルダにコンパイルさせています。`npx gulp`で実行します。

watch機能を追加して更新のたびに反映させましょう

以下のコードのように追加します。

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

gulp.task('default' ,() => {
    return (
        gulp.watch('sass/style.scss', () => {
            return(
                gulp
                .src('sass/style.scss')
                .pipe(sass({
                    outputStyle: 'expanded'
                })
                .on('error',sass.logError)
                )
                .pipe(gulp.dest('css'))
            );
        })
    );
    
});

次からは中身をつくっていきます。

コメントは受け付けていません。