前提・実現したいこと
色々なサイトを見ながら初めての環境構築を行っていますがコンパイルが出来ていないようです。
srcディレクトリからbuildディレクトリにコンパイルできるようにしたいです。
現在のディレクトリ構造
├── build │ ├── assets │ │ ├── css │ │ ├── img │ │ └── js │ └── index.html ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── assets │ ├── css │ ├── img │ └── js ├── index.pug └── pug ├── _footer.pug ├── _headre.pug └── _template.pug
gulpfile.js
var gulp = require('gulp'); var sass = require('gulp-sass'); //Sassコンパイル var plumber = require('gulp-plumber'); //エラー時の強制終了を防止 var notify = require('gulp-notify'); //エラー発生時にデスクトップ通知する var sassGlob = require('gulp-sass-glob'); //@importの記述を簡潔にする var browserSync = require('browser-sync'); //ブラウザ反映 var postcss = require('gulp-postcss'); //autoprefixerとセット var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与 var cssdeclsort = require('css-declaration-sorter'); //css並べ替え var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); var mozjpeg = require('imagemin-mozjpeg'); var pug = require("gulp-pug"); var rename = require("gulp-rename"); //.pugの拡張子を変更 // scssのコンパイル gulp.task('scss', function() { return gulp .src('./src/assets/css/**/*.scss','!src/_**/*','!src/**/_*',{ base: './scss' }) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) //エラーチェック .pipe(sassGlob()) //importの読み込みを簡潔にする .pipe(sass({ outputStyle: 'expanded' //expanded, nested, campact, compressedから選択 })) .pipe(postcss([autoprefixer({ // ☆IEは11以上、Androidは4.4以上 // その他は最新2バージョンで必要なベンダープレフィックスを付与する browsers: ["last 2 versions", "ie >= 11", "Android >= 4"], cascade: false })])) .pipe(postcss([cssdeclsort({ order: 'alphabetically'})])) //プロパティをソートし直す(アルファベット順) .pipe(gulp.dest('./build/assets/css')); //コンパイル後の出力先 }); // 保存時のリロード gulp.task('browser-sync', function(done) { browserSync.init({ //ローカル開発 server: { baseDir: "./build", index: "index.html" } }); done(); }); gulp.task('bs-reload', function(done) { browserSync.reload(); done(); }); gulp.task("pug", (done) => { gulp .src(["./src/pug/**/*.pug", "!" + "pug/**/_*.pug"]) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>")})) //エラーチェック .pipe(pug({}, {}, { ext: '.html' })) //pugを纏める .pipe(rename({ extname: ".html" })) //拡張子をhtmlに .pipe(gulp.dest("./build")); //出力先 done(); }); // 監視 gulp.task('watch', function(done) { gulp.watch('./src/pug/**/*.pug', gulp.task('pug')); //pugが更新されたらgulp-pugを実行 gulp.watch('./src/pug/**/*.pug', gulp.task('bs-reload')); //pugが更新されたらbs-reloadを実行 gulp.watch('./src/assets/css/**/*.scss', gulp.task('scss')); //sassが更新されたらgulp sassを実行 gulp.watch('./src/assets/css/**/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行 gulp.watch('./src/js/*.js', gulp.task('bs-reload')); //jsが更新されたらbs-relaodを実行 }); // default gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch'))); //圧縮率の定義 var imageminOption = [ pngquant({ quality: [70 - 85], }), mozjpeg({ quality: 85 }), imagemin.gifsicle({ interlaced: false, optimizationLevel: 1, colors: 256 }), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo() ]; // 画像の圧縮 // $ gulp imageminで./src/img/base/フォルダ内の画像を圧縮し./src/img/フォルダへ // .gifが入っているとエラーが出る gulp.task('imagemin', function() { return gulp .src('./src/img/base/*.{png,jpg,gif,svg}') .pipe(imagemin(imageminOption)) .pipe(gulp.dest('./src/img')); });
package.json
{ "name": "devlop", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" "start": "gulp watch", "build": "gulp build", "gulp": "gulp" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "gulp": "^4.0.2" }, "devDependencies": { "autoprefixer": "^9.6.1", "browser-sync": "^2.26.7", "css-declaration-sorter": "^4.0.1", "gulp-imagemin": "^6.1.0", "gulp-notify": "^3.2.0", "gulp-plumber": "^1.2.1", "gulp-postcss": "^8.0.0", "gulp-pug": "^4.0.1", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-sass-glob": "^1.1.0", "imagemin-mozjpeg": "^8.0.0", "imagemin-pngquant": "^8.0.0" } }
補足情報
回答1件
あなたの回答
tips
プレビュー