【制作過程実況動画付】npm scriptとGulp4で簡単なWeb制作向けタスクランナーを作る方法 | オレインデザイン
こちらの記事では、npm script からGulpを呼び出してSass→CSSのコンパイルをさせたり、画像を最適化して別のところに出力させたり、JavaScriptをBabelを通して書き換えたりするためのタスクランナーを自分でつくることができるようになります。 最下部に、実際作っている実況動画と最終的なコードを掲載しているので、とりあえず試したいという方は、そちらを試されてから必要なところだけ読んでもらうという使い方もしていただけるかと思います。 前提 こちらの環境はMacですので、Macでの解説がメインです。Windows利用者の方は適宜読み換える必要がある部分があります。あらかじめご了承ください。 あると良い知識 JavaScriptがなんとなくわかると良いと思います。npmは見よう見まねでも今は大丈夫でしょう。使っていく上で必要であれば自ずと覚えれます。 タスクランナーとは？ W
いまさら始めるGulpでWordPressテーマ開発 | オレインデザイン
今回はGulpの導入から最低限の活用部分まで、どうやったら使えるのか・使えるようになるのかを紹介してみたいと思… こちらを元にして、今回はWordPressテーマのGulp開発環境を作ってみようと思います。といっても、ベースはすでに出来上がっているので、少し変更を加えたりする程度になります。 あと、環境としてはLocal by Flywheelを使うことを想定しています。 内容としては、 WordPress開発環境を作るベースの環境を作る 自動でrtl.cssを書き出す 監視タスクを作る というような感じになります。他のSassコンパイルやJavaScriptの結合・圧縮部分は前回のコードに書き出し先を変更したりする程度で大丈夫です。では始めていきましょう。 WordPress開発環境を作るベースの環境を作る まずは、前回作った環境のpackage.jsonとgulpfile.jsをコピー
いまさら始めるgulp入門 | オレインデザイン
$ node -v これで何かしら数字が出てきたら、Node.jsのインストール完了です。 プロジェクトのフォルダを作る まずは、プロジェクトのフォルダを作りましょう。デスクトップでもどこでも大丈夫なんで作りましょう。今回はデスクトップにmyprojectというフォルダを作って進めていきます。 そして、ターミナルで、作ったフォルダにアクセスしておきましょう。ここからは、基本こちらで作ったフォルダ内で作業しますので。 cdで移動先を指定するんですが、長いパスを入力するのは面倒なんで、該当フォルダをターミナルにドロップすると、パスを自動で入力してくれるので、こちらの方法の方が（特に初心者の方は）間違いがないです。 ちなみに、cdというコマンドは、Change Directoryという意味です。 npm initする ターミナルでプロジェクトフォルダに移動していることを確認して、 $ npm i
【DartSass対応】どこよりも詳しいGulp 4環境構築【Mac編】 | TipsWeb
はじめに 「Gulpってなに？」 「便利だと聞くけれどどうやって導入したらいいのかわからない」 そう悩まれているかた多いと思います 何故なら多くの記事が、古いGulpのバージョンの記述方法で書かれていたり、Node.jsのインストール方法が違ったりして、初心者にとっては、何が正解で、どの記事をあてにしたらいいのかわからないからです ただ、それで挫折して導入をあきらめるのは本当にもったいないです なので、初学者の方や少し勉強された方、これから導入を考えている方に向けてこの記事を書きたいと思います Gulpは最新の4系を採用しています gulpfile.jsの書き方も最新のものとなっています また、Sass公式推奨のDart Sassで記述しているので安心して読み進めていただけます Gulpとは？ 簡単にGulpについて説明します Gulpを使うと以下の作業を全部自動化してくれます（本当はもっ
gulp4の設定方法 - DartSassやAutoprefixer、ejs、Babel、を自動化する
gulp4の設定方法 - DartSassやAutoprefixer、ejs、Babel、を自動化する gulpとはnode.jsベースで動くパッケージで、いままで面倒だった作業を自動化してくれる優れもの。今回gulp4で設定する内容は以下になります。 DartSassautoprefixer(grid対応も)htmlの共通部分のパーツ化（ejs）JavaScriptはBableによってトランスパイル cssとJavaScriptの圧縮処理 説明する環境は以下の通りです。 macOS Catalina v10.15.5Visual Studio Code v1.57.0node.js v16.13.1 gulp4に必要なパッケージを確認する gulp4の設定を説明する前に、必要なパッケージがインストールできているか確認しましょう。必要なパッケージは３つ。 Homebrewnodebrewn
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
2020年版：Gulp4でSassとPugをビルドしてBrowserSyncでライブプレビューする - Qiita
const gulp = require('gulp'); const notify = require("gulp-notify"); const plumber = require("gulp-plumber"); const sass = require('gulp-sass'); const pug = require('gulp-pug'); const autoprefixer = require('gulp-autoprefixer'); const uglify = require('gulp-uglify'); const browserSync = require('browser-sync'); //setting : paths const paths = { 'root' : './dist/', 'pug' : './src/pug/**/*.pug', 'ht
Sassのモダンなコンパイル環境が3分で作れるParcel入門 - 独自設定ファイルは不要 - ICS MEDIA
ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。 webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。 Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。 Sassのコンパイル Autoprefi
Bootstrap 4のCSSコンパイルをGulpで管理する方法 - Qiita
Twitter社製UI作成フレームワークBootstrapの最新版「Bootstrap 4」では、SassをベースにしたCSS設計が可能です。Bootstrap 4にデフォルトで準備されているタスクランナーはGruntですが、簡潔な記述でかつ高速な処理が可能なGulpの方が今は人気で、Bootstrap 4のCSSコンパイルタスクもGulpで管理したいところです。本エントリーでは、Bootstrap 4のCSSコンパイルタスクをGulpで管理する方法を紹介します。 ▲ GulpとGruntをGoogleトレンドで検索した結果。赤がGulp。（カテゴリ:コンピュータ、家電製品） ソースファイルのダウンロードとGulpの準備 ダウンロードページの[Source files]より、Sassを含むファイル一式をダウンロードし、任意の場所に展開します。展開した場所でターミナルを起動し、Gulpを使う
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） - Qiita
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
WordPress のテーマ開発に絶対必須な gulp プラグイン９選！
3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sassのコンパイルをはじめとし、様々なことを自動で行ってくれる、タスクランナーと呼ばれるものです。 gulp 詳しい使い方はこちらのページをご覧ください。 gulpでsassをcssにコンパイル。インストール＆便利な使い方。 ディレクトリについて 今回はこのようなフォルダ構成になっております。 theme/ ∟vccw/wordpress/wp-content/themes/mytheme/ ∟src/ ∟js/ ∟script.js ∟pug/ ∟index.pug ∟sass/ ∟style.sass ∟gulpfile.js ∟node_modules/ gulp-sass gulp-sass は、 Sass
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境 フロントエンドの開発を色々と捗らせてくれる gulp について、ここ最近、私が利用しているパッケージの紹介を中心に、主に Web サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。 gulp v4 が正式リリースされたため、本記事で紹介していた gulpfile.js ファイルの記述方法を v4 にあわせて修正しました。詳しくは 「gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点」 をご覧ください。 もう 4年くらい前になりますが Web デザイナーさん向けみたいな感じで、所謂 「黒い画面」 にあまり普段から慣れていない方向けの Grunt 導入記事を書いたんですけども、内容的にはもう古いし、Grunt いいよって紹介
Mac初心者おすすめ！フロントエンドやコーダー向け初期設定
作成：2018/03/5 更新：2019/01/29 Mac > Web制作 Windowsを使っていたフロントエンドエンジニアやコーダーがMacに乗り換えたときに、最低限やっておきたいMac初心者向けの便利な初期設定。 エンジニア速報は Twitter の@commteで配信しています。 ターミナルのテーマ変更 ターミナルもしくは、iTerm等のテーマをiceberg、フォントをRictyに変更。 ダウンロード テーマ：Iceberg フォント：Ricty Diminished 参考：お前らのターミナルはダサい - Qiita 開発環境 コーディングに必要なツール管理をインストールします。不要な人は読み飛ばしてください。 Xcode インストール xcode-select --install homebrew インストール /usr/bin/ruby -e "$(curl -fsSL h
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
PostCSSのプラグイン探しに使えるサイト - NxWorld
PostCSSのプラグインを探せるサイトのまとめです。 普段からPostCSSを多用しているならある程度使うプラグインは決まっていたりしますし、そんなに頻繁に探すわけでもないですが、ざっくりとした動きは同じでも細かい部分で違いがあったり、中には「これどんな場面で使うの？」って感じの面白いプラグインもあったりするので、いろいろ試したいときや新しいプラグインを見つけたいときに。 PostCSS Plugins リポジトリ内のplugins.mdにざっくりとしたカテゴリー別に分かれた形でプラグインが一覧化されています。 各プラグインリポジトリへのリンクも付いており、どのような機能を追加できるかのシンプルな説明文もあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これだけは入れておきたいGulpタスク３選 | TipsWeb
Webサイト開発スピードをサポートするモダンなCSSフレームワーク・「BuddyCSS」
YJTC18 B-4 Yahoo! JAPANトップページのコーディング
anyenvとnodenvでNode.jsのバージョン管理をしよう！
