Gulp4 コピペで使えるコード
Gulp使おうかと思った時には、いつもテンプレ使うのでいつまでたっても覚えられません。
ということでテンプレ置いておきます。
仕様
- 生成されたURLは、セーブした瞬間自動で(少しだけ遅れて)反映されます。
- 当然SASSやSCSSは全部セーブした瞬間コンパイルです。(sassの場合はgulpfile.jsのscssのディレクトリを変更してください。)
- またcssのディレクトリは自分で作らなくても自動で作成されます。
- scssのファイルを増やしてしまうと、一度コマンドを停止してもう一度実行する必要があるかも
テンプレート
gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const webserver = require('gulp-webserver');
gulp.task('scss', () => {
return gulp.watch('./scss/*.scss', () => {
return gulp.src('./scss/*.scss')
.pipe(plumber())
.pipe(sass({ outputStyle: 'compressed' })) // 通常:expanded, 圧縮:compressed
.pipe(autoprefixer())
.pipe(gulp.dest('./css'));
});
});
gulp.task('webserver', () => {
return gulp.src('./')
.pipe(webserver({
host: 'localhost',
port: 8080,
livereload: true
}))
});
gulp.task('default',
gulp.series(
gulp.parallel('scss', 'webserver'),
)
);
How To Use
bash
$ mkdir myproject && cd myproject
$ touch gulpfile.js
$ yarn add -D gulp gulp-sass gulp-plumber gulp-autoprefixer gulp-webserver
$ npx gulp
感想
興味ある人は、やってみるとどうでしょうか。
scssのファイルにindex.scssを置いてその下にmoduleやcomponentsって名前のディレクトリを用意してimportして使ってます。
必要なモジュールやコンポーネントだけをindex.scssに入れることでcommonなどのディレクトリをつくってわざわざ共有するよりいいと思います。
より便利な環境でハッピーなプログラミングライフを(๑˃̵ᴗ˂̵)♪
Author And Source
この問題について(Gulp4 コピペで使えるコード), 我々は、より多くの情報をここで見つけました https://qiita.com/yusk24/items/a3c8fb5958e24a0a573f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .