common.cssに変更があるたびにベンダープレフィックス付与する。出力先.pipe(gulp.dest("css"));});});Scssのコンパイルをした時、common.scssというファイルをpre-autoprefixerというフォルダの中にcommon.cssファイルとして出力しましたよね。これはベンダープレフィックスを付与する前の状態のcssを入れるフォルダです。上の記述では、その付与する前のpre-autoprefixer/common.cssにベンダープレフィックスを付与して、css/common.cssとして出力しています。↓css/common.cssって感じです。ちなみにAutoprefixerはどんなブラウザに対応するかも設定できます。最新版のAutoprefixerではgulpfile.jsではなくpackage.jsonに記述することになっています。11"]上の記述は「IEは11以上に対応して、それ以外は最新から数えて2バージョンに対応する」という意味です。以下のサイトにBrowserslistが載ってますので、参照してください。browserslist/browserslistそしてもちろんAutoprefixerもその他のタスクと並列で実行するので、defaultタスクの記述は以下に変わります。いちいちパンダの画像圧縮サイトに行く必要がなくなります。transparency!というか、あのサイトも実はこの圧縮の技術を使っているんです。必要なプラグインをインストールしていきましょう。各プラグインの説明は以下の通り。「gulp-imagemin」:画像を圧縮する「gulp-changed」:ファイルの変更を検知する(変更・追加されたファイルだけ圧縮するため)「imagemin-pngquant」:PNGファイルの圧縮率を高める「imagemin-mozjpeg」:JPEGファイルの圧縮率を高める「gulp-notify」:エラーが出たらお知らせしてくれる一気にインストールしちゃいましょう。gulp-notifygulpfile.jsに追加する記述は以下のとおりです。0-100まで幅を持って指定可能。こちらも0から100まで指定できるが、pngquantと違って65-80のように幅を持って指定はできない。baselineとprogressiveがある。baselineよりprogressiveのほうがエンコードは遅いが圧縮率は高い。0-100まで幅を持って指定可能。こちらも0から100まで指定できるが、pngquantと違って65-80のように幅を持って指定はできない。baselineとprogressiveがある。baselineよりprogressiveのほうがエンコードは遅いが圧縮率は高い。gulp.series('images'))});最後にdefaultタスクにwatch-imageminを足したら完成です。'watch-imagemin'));よくここまでたどり着きました!復習あなたは以下のタスクを自動化しました。/Users/ユーザー名/作業フォルダ名この短いコマンドを打つだけです。手っ取り早いのが関連するフォルダとファイル一式をコピーして貼り付ける方法です。端末が違う場合はこの方法はできませんが、同一端末内の別フォルダへのコピペならおおよそ問題ありません。(全ての条件下でこれが有効とは限りませんが、おおよその場合は大丈夫です。)関連するフォルダとファイルは以下の5つです。前述しましたが、先頭が「.」で始まる.babelrcファイルは⌘コマンドキーと「.」キーを同時押しすることで表示されます。あとはsrcフォルダですね。今回はsrcフォルダの中身をコンパイルしたり、トランスパイルしたりしてます。作業するときはsrc内に作業JSやCSSなどを入れてください。gulpfile.jsの中身をいじって好きなフォルダに変更することも出来ます。今回のsrcの中身は以下のとおりです。設定を変更しなければscssはcommon.scssのみコンパイルする設定にしてます。これはcommon.scssだけを使うか、common.scssに複数のScssファイルをを呼び出して統合していることを想定しています。Scssについてはまた次回の記事に書きますね。【静的サイトジェネレータ】WordPress不要!2020年注目のVuePressの特徴をまとめてみたホームページ制作費が分割払いできます【WEB制作編】2019年の記事を振り返る。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。reserverd.。