今日の積み上げ 226日目 成果
＼宣言した内容はこちらです／
本日の学び
デザインカンプコーディング:CSS設計
CSS設計を頑張っています。
まずはディレクトリ（箱物）を作って、
そこから必要な中身を作成するに合わせてファイルをちょこちょこ作成していこうかと思います。
最初はこんな感じで適当に作成。
しかし、このディレクトリにすると、
なぜかimageファイルが反映されなくなってしまったので、
以下の通りディレクトリ構造を変更（imagesフォルダをdistフォルダ内に移動）。
distファイルは「ブラウザに表示される」ファイルなので、
distフォルダを基点として相対パスを指定します。
例えば、headタグ内に記載するcssを参照するためのコードは、こちらのように書きます。
<!-- CSS -->
<link rel="stylesheet" href="./css/style.css">また、イメージファイルを参照する相対パスも、こちらのように書きます。
<img src="./images/logo-red.png" alt="header_icon">なぜsrcフォルダとdistフォルダが分かれているのかというと、
「ファイル管理のしやすさ」という観点から大事だからです。
以下の記事を参考にGulpファイルを作成しています。
こちらの記事に書かれたGulpファイルには、
コンパイル後のhtml,cssファイルをdistフォルダに出力するように記載しており、
納品やサーバにアップロードするファイルを
distフォルダに集約できるようにしたからです。
注意：相対パスを記載する際は、作成用ファイルのsrcフォルダではなく、ブラウザに表示されるdistフォルダを起点にパスを書かないと、うまく表示されませんでした。
ご参考（gulpfile.jsの記載内容）↓
const gulp = require('gulp');//gulp本体
//scss
const sass = require('gulp-dart-sass');//Dart Sass はSass公式が推奨 @use構文などが使える
const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない
const notify = require("gulp-notify"); // エラー発生時のアラート出力
const browserSync = require("browser-sync"); //ブラウザリロード
// 入出力するフォルダを指定
const srcBase = '../_static/src';
const assetsBase = '../_assets';
const distBase = '../_static/dist';
const srcPath = {
'scss': assetsBase + '/scss/**/*.scss',
'html': srcBase + '/**/*.html'
};
const distPath = {
'css': distBase + '/css/',
'html': distBase + '/'
};
/**
* sass
*
*/
const cssSass = () => {
return gulp.src(srcPath.scss, {
sourcemaps: true
})
.pipe(
//エラーが出ても処理を止めない
plumber({
errorHandler: notify.onError('Error:<%= error.message %>')
}))
.pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed
.pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先
.pipe(browserSync.stream())
.pipe(notify({
message: 'Sassをコンパイルしました！',
onLast: true
}))
}
/**
* html
*/
const html = () => {
return gulp.src(srcPath.html)
.pipe(gulp.dest(distPath.html))
}
/**
* ローカルサーバー立ち上げ
*/
const browserSyncFunc = () => {
browserSync.init(browserSyncOption);
}
const browserSyncOption = {
server: distBase
}
/**
* リロード
*/
const browserSyncReload = (done) => {
browserSync.reload();
done();
}
/**
*
* ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す
* series 順番に実行
* watch('監視するファイル',処理)
*/
const watchFiles = () => {
gulp.watch(srcPath.scss, gulp.series(cssSass))
gulp.watch(srcPath.html, gulp.series(html, browserSyncReload))
}
/**
* seriesは「順番」に実行
* parallelは並列で実行
*/
exports.default = gulp.series(
gulp.parallel(html, cssSass),
gulp.parallel(watchFiles, browserSyncFunc)
);苦戦しながらも、なんとか前に進んでいっている感じはします。
本日の反省
時間を有効活用する
開業の準備もそろそろ手をつけなければいけないので
色々とタイトになってきました。
ただ学習だければやっていいという状態ではなくなります。
けど、ワクワクもいっぱいあります。
学習に関しては、自走力も大事ですが
メンターさんにたくさん頼って、時間を有効活用していきます。
今日も諦めなかった自分、お疲れ様でした！
Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪
コメント