gulpfile.js
const {src, dest, watch, series, parallel} = require('gulp');//ここを変更
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server = browserSync.create();
function icon(done){
for(let size of sizes){
let width = size[0];
let height = size[1];
src('./favicon.png')
.pipe($.imageResize({
width,
height,
crop: true,
upscale: false
}))
.pipe($.imagemin())
.pipe($.rename(`favicon-${width}×${height}.png`))
.pipe(dest('./dist/images/icon'));
}
done();
}
function styles(){
return src('./src/sass/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.postcss([
autoprefixer({
"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
cascade: false
})
]))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/css'));
}
function scripts(){
return src('./src/js/*.js')
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/js'));
}
function lint(){
return src('./src/js/*.js')
.pipe($.eslint({fix: true}))
.pipe($.eslint.format())
.pipe($.eslint.failAfterError())
.pipe(dest('./src/js'))
}
function startAppServer(){
server.init({
server: {
baseDir: './dist'
}
});
watch('./src/**/*.scss', styles);
watch('./src/**/*.scss').on('change', server.reload);
}
const serve = series(parallel(styles, series(lint, scripts)), startAppServer);
//ここを追加
exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.lint = lint;
exports.serve = serve;//ここを変更
gulp serveで実行
コマンドを実行するだけで、プリコンパイル、トランスパイル、サーバーの立ち上げまで一括してできる
package.jsonからの実行方法
package.json
//以下を追加
"scripts":{
"start":"gulp serve"
},
これでyarnかnpmのコマンドを使ってタスクを呼び出すことが出来る
yarn run start
もしくは
npm start
これでも立ち上がる