一昨日のスクールの復習 ターミナル

かなりショックだったのが、一回勉強した、ターミナルでの操作を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

この記事が気に入ったらサポートをしてみませんか?