必要なものインストール
npm install gulp-sass --save-dev npm install gulp-autoprefixer --save-dev npm install gulp-sourcemaps --save-dev npm install gulp-clean-css --save-dev npm install gulp-rename --save-dev
gulpfile.js編集
// gulpfile.js
const gulp = require('gulp'); const autoprefixer = require('gulp-autoprefixer'); const cleanCSS = require('gulp-clean-css'); const rename = require('gulp-rename'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const paths = { 'src': { 'scss': 'src/scss/**/*.scss', }, 'dist': { 'css': 'dist/css/', } }; gulp.task('sass', done => { gulp.src(paths.src.scss) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'expanded', }).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(sourcemaps.write()) .pipe(gulp.dest(paths.dist.css)) .pipe(cleanCSS()) .pipe(rename({ suffix: '.min', })) .pipe(gulp.dest(paths.dist.css)); done(); }); gulp.task('dev', () => { gulp.watch(paths.src.scss, gulp.task('sass')); });
package.json編集
{ ... scripts部分に追記してください "scripts": { "dev": "gulp dev" } }
実行
ファイルが変わるたびに、コンパイルされます。
npm run dev
参考サイト
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9MjAxOCVFNSVCOSVCNCVFMyU4MSVBRSVFNyVCNSU4MiVFMyU4MiU4RiVFMyU4MiU4QSVFMyU4MSVBQiVFNiU5NCVCOSVFMyU4MiU4MSVFMyU4MSVBNmd1bHAlRTMlODElQTdzYXNzJTI4c2NzcyUyOSVFMyU4MiU5MiVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU5MSVFMyU4MiVBNCVFMyU4MyVBQiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MCU5MCVFNiVCMSVCQSVFNSVBRSU5QSVFNyU4OSU4OCVFMyU4MCU5MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzE5MjI0MTMzMzM4MjQwNzIzY2JlYzI4NTI4NTUzMDE&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDA3MTEwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xNjk0OGYwN2MwNjJkMzEwNDZlY2U2OWNmYWJmZDk1Nw&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4gWWFob28h44OH44OZ44Ot44OD44OR44O844ON44OD44OI44Ov44O844Kv&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=e527e7263b1abd7af15973d688cf79bb)
2018年の終わりに改めてgulpでsass(scss)をコンパイルする【決定版】 - Qiita
2018年の終わりに改めて gulp 4系で sass (scss) をコンパイルする2018年の終わりが目前に迫った年の暮れ、改めて gulp にて sass をコンパイルする環境を構築してみま…
コメント