なんのこっちゃない、今回は書いてあるコマンドをコピーして貼り付けるだけです。ご了承下さい!JavaScriptの基本的な記述ができる(変数、定数の代入など)エディタの基本的な操作ができる(ファイルを開く、編集するなど)Macをお使いの方(記事の尺の都合上、Winは省いてます。すみません!)下準備Node.jsをインストールGulpを使う前にNode.jsが必要になります。公式サイトからダウンロードからの推奨版のインストールを行なって下さい。engine.ここはまだターミナルとかじゃなくてクリックでインストールできるのでご安心を(⌒▽⌒)作業フォルダの作成と移動ターミナルを開いて下さい。作業するフォルダをUsers/ユーザ名以下に作成しましょう。私はokudaというユーザ名なので、okudaの下にworkspaceというフォルダを作成しました。フォルダの作成はコマンドでもできますが、とりあえず普通に「新規フォルダの作成」で作ってください。次にそのフォルダへ移動します。ここでは「cd」というコマンドを使います。Directoryの略です。/Users/okuda/workspace自分のユーザ名がワカラナイ!という方はターミナルを開いて、すぐ上に表示されているのがあなたのユーザ名です。(私はターミナルの表示設定をカスタマイズしているので、皆さんは白いターミナルに黒字のテキストかもしれません。自分の作成した作業フォルダに移動したら、以下のコマンドでpackage.jsonを作成します。initは初期化の意味です。本来はいくつか質問が出てきて何回かエンターキーを押す必要があるのですが、それらすべてをyesで返事するよってことで-yがついてます。gulpGulpのインストールはこれだけ。最後の方に「gulp@4.0.2」みたいなバージョン名が表示されていれば成功です。下準備はこれで終わり。自動化していくタスクの記述に移りましょう。4つのタスクを自動化ScssのコンパイルGulpにはいろんなプラグインが用意されていて、それらをインストールしてから処理を記述していきます。Sassというプラグインをインストールしましょう。gulp-sassこのときも「gulp-sass@4.0.2」などと表示されればOK。次に処理を記述するgulpfile.jsを設定します。エディタで「gulpfile.js」を新規作成して下さい。場所は作成したフォルダの中です。私はworkspaceの直下にgulpfile.jsを作成したので、ファイルパスはworkspace/gulpfile.jsみたいな感じですね。処理の記述例は以下のとおりです。ファイルはすべてsrc(ソースの略)フォルダの中に入れていきます。上記はworkspace/src/scss/common.scss(変換前)をworkspace/pre-autoprefixer/common.css(変換後)にコンパイルする記述です。cssフォルダではなくpre-autoprefixerという名前のフォルダに出力するかは、あとで説明します。●をつけた記述ですが、現在はcompactに設定しています。Scss(Sass)をどんな形式のcssとして出力するかを指定する場所ですね。compactの出力形式については以下のサイトが参考になりますので、リンクを貼っておきます。Qiitahttps://qiita.com/RMEL/items/b3350e912cbabe9e803e##CSSの出力形式を変えたい・・・><。調べてみたところ、どうやらビルド時にオプションとしてCSSの出力形式を指定することが出来るらしい。デフォルト以外の出力形式を指定したい場合はgulpfile.jsを編集してあげればいいっ...とりあえずここまででコンパイルできるかどうか試してみましょう。作成したフォルダにターミナルのcdで移動したら、以下のコマンドを叩きます。(この記事を開いてから一度もターミナルを閉じていなければすでに移動済みかと思います。表示されているのが分かります。これはScssを監視できている証拠なので、scssの中身をエディタで変更してみましょう。Scssに変更を加えて保存するとcssフォルダに新しくcommon.cssが出来ているのが分かります。これでコンパイルは完了です。ちなみにコマンドの処理を止めるにはControlキーとCを同時に押します。BabelES6のモダンな書き方を、ブラウザが読めるようにES5に変換するBabel。これを使うのはフロントエンドエンジニアくらいかなぁと思いつつ、便利なので一応入れてみます。今ES6書いてない人も、いずれは書くことになるのでとりあえず入れときましょ(⌒▽⌒)まずプリセット・Babel・babel-coreをインストールします。(プラグインの名前を複数書いて同時にインストールすることができます。以下は「@babel/preset-env」「gulp-babel」「@babel/core」の3つを同時にインストールしています。@babel/coreそのあと、.babelrcというファイルを作成し、使用するES6のプリセットを記述します。先頭に「.」がつくファイルはシステムファイルと呼ばれ、普段は表示されていない場合があります。⌘コマンドキーと「.」キーを同時に押すと、これらのシステムファイルは表示されるようになります。["@babel/preset-env"]}gulpfile.jsのScssコンパイルの記述の下にトランスパイルする記述を書き足します。トランスパイル後のjsの出力先を指定.pipe(gulp.dest('js')))});});babelもscss同様に、~.es6という名前のファイルが変更されたら勝手に変換されるようにしました。watch-scssこうターミナルで実行していました。watch-imageminこんなに書かなくてはいけません。タスクランナーを使って作業を効率化するんですから、実行するときも楽ちんにしましょう。「watch-scss」と「watch-babel」の両方を並行して(parallel)実行するdefaultタスクをgulpfile.jsに書きます。'watch-babel'));ちなみに、defaultっていう名前のついたタスク(今のところ「watch-scss」と「watch-babel」が入っている)はターミナルのコマンドで実行するときにタスク名を指定せずに済みます。以下のコマンドだけでOK。gulpこれだけで今、watch-scssとwatch-babelが動いていると思います。src/es6/◯◯.es6というファイルを作ります。ES6で書かれたファイルです。私は試しにsrc/es6/test.es6というファイルを作ってみました。(src/es6/まではフォルダの位置です。「test.es6」が作成したファイルの名前です。{console.log(greeting);}letで変数を定義し、アロー関数を用いています。letもアロー関数もES6の書き方です。watch-babelは実行されているので、test.es6はtest.jsという名前で出力されています。ファイルパス(ファイルの位置)は/js/test.jsです。{console.log(greeting);};letがvarになり、アロー関数がfunctionになってますね。AutoprefixerCSSをクロスブラウザ対応させるにはしばしばベンダープレフィックスを書かなければいけません。どのプロパティがベンダープレフィックスを必要としているのか全て把握するのは不可能です。毎回調べていては時間が掛かるし......。いうことで、すべて自動化してしまいましょう。自動でベンダープレフィックスを付与してくれるAutoprefixerを導入します。gulp-autoprefixergulpfile.jsに処理を書いていきます。common.cssに変更があるたびにベンダープレフィックス付与する。