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が作られる。
以上
