一昨日のスクールの復習 ターミナル
かなりショックだったのが、一回勉強した、ターミナルでの操作をlsくらいしか覚えてなかった
だからこれから使っていくためにも一回まとめて、常に使っていきたい
$ls で今いるディレクトリの中の中身を確認(一つ下の子の階層のみ)
$cd .. で一つ親のディレクトリに戻る
$cd 移りたいディレクトリ名 で移動
一番親のディレクトリはルートディレクトリ
$pwd で今いるディレクトリの表示
$mv 移動させたいファイル名、ディレクトリ 移動先のディレクトリ
でファイルの移動
$cp コピーするファイル 新しいファイル名 でファイルのコピー
$cp -r コピーするディレクトリ 新しいディレクトリ名 でディレクトリのコピー
$rm ファイル名 でファイルの削除
$rm -r ディレクトリ でディレクトリの削除
$cat ファイル名 でテキストファイルの表示
$touch ファイル名 でファイルの作成
$mkdir ディレクトリ名 でディレクトリ名の作成
$mkdir app{1..40} とすると、app1から40個ファイルができる
$which ファイル名でどこにそのファイルがあるかわかる
次に、glupの使い方
node.jsは読み込んであるのを確認して、
$mkdir で新規ファイルを作成し、vscodeで開いて、vscode内のターミナルで、(macのターミナルでも可)
npm init
を入力し、package.jsonを作成。。名前を入れ、残りはそのままでいい
npm install -D gulp
でnpmから、gulpをインストールして、-Dでセーブ
npm install -D gulp gulp-sass
で本体に落としたgulpとgulp-sassをつなげる
gulpfile.js のファイルと
cssフォルダ内のstyle.scssを作成
// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");
// style.scssをタスクを作成する
gulp.task("default", function() {
// style.scssファイルを取得
return (
gulp
.src("css/style.scss")
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: "expanded"
})
)
// cssフォルダー以下に保存
.pipe(gulp.dest("css"))
);
});
をgulpfile.jsに貼り付け、コマンドで、
npx gulp
を押すとcss内にstyle.cssが作成され、
npx gulp
と押していくたびコンパイルされていく
※ Sassの出力時のコードはexpandedの他にも、nested(ネストがインデントされる)、compact(規則集合毎が1行になる)、compressed(全CSSコードが1行になる)などがあります。
でその後に
// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");
// style.scssの監視タスクを作成する
gulp.task("default", function() {
// ★ style.scssファイルを監視
return gulp.watch("css/style.scss", function() {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
return (
gulp
.src("css/style.scss")
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: "expanded"
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on("error", sass.logError)
)
// cssフォルダー以下に保存
.pipe(gulp.dest("css"))
);
});
});
にgulpfile.jsを変更すると自動コンパイルになる
監視システムを止めるには、
control + C