npm install -D prettier gulp-prettier-plugin
var gulp = require('gulp');
var prettierPlugin = require('gulp-prettier-plugin');
var imagemin = require('gulp-imagemin');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var eslint = require('gulp-eslint');
var plumber = require('gulp-plumber');
var webserver = require('gulp-webserver');
gulp.task('prettier', function(done){
gulp.src(['./src/sass/*.scss','./src/*.js'])
.pipe(prettierPlugin({
prettier:{
singleQuote:true
},
},{filter: true}))
.pipe(gulp.dest(file => file.base))
done();
});
gulp.task('html', function(done){
gulp.src('./src/*.html')
.pipe(gulp.dest('./dest'))
done();
});
gulp.task('img', function(done){
gulp.src('./src/img/*.png')
.pipe(imagemin())
.pipe(gulp.dest('./dest/img'))
done();
});
gulp.task('sass', function(done){
gulp.src('./src/sass/*.scss')
.pipe(plumber())
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass({outputStyle: 'expand'}))
.pipe(gulp.dest('./dest/css'))
done();
});
gulp.task('js', function(done){
gulp.src(['./src/*.js','!node_modules/**'])
.pipe(plumber())
.pipe(eslint({ useEslintrc: true }))
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.pipe(gulp.dest('./dest/js'))
done();
});
gulp.task('watch', function(done){
gulp.watch('./src/*.html', gulp.task('html'))
gulp.watch('./src/js/*.html', gulp.task('js'))
gulp.watch('./src/sass/*.scss', gulp.task('sass'))
done();
});
gulp.task('webserver', function(done){
gulp.src('./dest')
.pipe(webserver({
host:'192.168.34.10',
port: 8000,
livereload: true,
}));
done();
});
gulp.task('default', gulp.series('prettier','html','js','img','sass','watch','webserver'));
とりあえず、環境構築はこんなところか。
さー、front書き始めましょうかね^^
