npm i gulp gulp-sass sass --save-dev
--save-dev
의 경우 devDependencies에 저장한다는 뜻이다. "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"gulp": "gulp"
},
package.json
파일에 gulp
사용을 위해 추가해 준다.gulpfile.js
파일을 만들고, scss → css 에 관련된 코드를 적어준다.const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
function buildtyles() {
return src('index.scss')
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(dest('css'))
}
function watchTask() {
watch(['index.scss'],buildtyles)
}
exports.default = series(buildtyles, watchTask);
src()
: sourcedest()
: destinationwatch()
: npm의 --watch와 같은 기능 series()
: task function을 이어 준다.pipe()
: chaining의 역할을 해준다.