質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

1474閲覧

初めての環境構築(gulp,scss)コンパイルがうまく出来ません。

atk_3

総合スコア43

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2019/08/26 10:01

前提・実現したいこと

色々なサイトを見ながら初めての環境構築を行っていますがコンパイルが出来ていないようです。

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" } }

補足情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/08/26 14:44

これだと誰も試さないし、誰も回答しないので せめてGitHub上にプッシュしたほうが良いです。
atk_3

2019/08/27 11:29

ご回答ありがとうございます! 初めての質問でしたのでそこまで気が回りませんでした、次回からはお答えしやすいように 致します、アドバイスありがとうございます!
guest

回答1

0

自己解決

_herder.pug

上記のタイポでした。
すいませんでした。

投稿2019/08/27 11:31

atk_3

総合スコア43

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問