Gulpでscssをコンパイルする手順

デザイン

node.jsはインストール済の前提

任意の場所にフォルダ作成しておきます。

cd /Users/xxx/Desktop/フォルダ名 
npm init -y //package.json生成

以下のコマンドでgulp、 gulp-sass、 gulp-sourcemaps、gulp-autoprefixerをインストール

npm install -D sass gulp gulp-sass gulp-sourcemaps gulp-autoprefixer

フォルダ内にgulpfile.jsを作成し以下を記述

const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require("gulp-sourcemaps");

gulp.task("default", function () {
return gulp.watch("css/style.scss", function () {
return (
gulp
.src("css/style.scss")
.pipe(sourcemaps.init())
.pipe(
sass({
outputStyle: "expanded",
})
.on("error", sass.logError)
)
.pipe(
autoprefixer({
overrideBrowserslist: [
"last 2 versions",
"ie >= 11",
"Android >= 4",
],
cascade: false,
})
)
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("css"))
);
});
});

cssフォルダ作成し中に、style.scssを作成

npx gulp  //gulpスタート

sytle.scssに記述し保存すると、cssフォルダ内にstyle.css、style.css.mapが作られる。

以上

Pocket

タイトルとURLをコピーしました