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
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
Gulpを初めて使ってみた！導入からタスクお試し（gulp-cssmin, browser-sync）までの手順
Gulpを初めて使ってみた！導入からタスクお試し（gulp-cssmin, browser-sync）までの手順 Webサイトのコーディング時には、裏側で細々とした「タスク」がたくさん発生しています。 SASSのコンパイル CSSプロパティの順番を整頓する CSSやJSファイルの圧縮（minify） 画像を圧縮 ブラウザをリロードし、動作確認 …など それぞれのタスクを叶えるWebサービスやソフトウェアも充実していますが、全てを手動で行っていると時と場合によってムラが出やすいのが正直なところ…。 そこで活躍するのが「Gulp」のようなタスクランナーと呼ばれるツール。「ファイルが保存されたら」などの任意のタイミングで、あらかじめ登録されたタスクを機械的に実行してくれます。 単純に作業時間を短縮できることはもちろん、人的ミスを防いで成果物のクオリティを保つことにも繋がります。 今回はそんなGu
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境 フロントエンドの開発を色々と捗らせてくれる gulp について、ここ最近、私が利用しているパッケージの紹介を中心に、主に Web サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。 gulp v4 が正式リリースされたため、本記事で紹介していた gulpfile.js ファイルの記述方法を v4 にあわせて修正しました。詳しくは 「gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点」 をご覧ください。 もう 4年くらい前になりますが Web デザイナーさん向けみたいな感じで、所謂 「黒い画面」 にあまり普段から慣れていない方向けの Grunt 導入記事を書いたんですけども、内容的にはもう古いし、Grunt いいよって紹介
とあるLPの制作現場 - Qiita
やりたいことはWebpackだけでも実現できますが、今後ページが増えていくことを考えるとgulpを使用したほうがスッキリ書けそうなので、gulpとWebpackを併用しました。最近gulpの名前をめっきり聞かなくなりましたが、元気にしているだろうか。 Webpackとgulpの使い分け、あるいは共存 Webpack webpack is a static module bundler for modern JavaScript applications. https://webpack.js.org/concepts/ 色々なファイルをまとめて、モリモリなJSファイルを出力してくれる。BabelやSassなどのローダーを設定するだけで、いい感じに変換してくれる。プラグインを使えばHTMLやCSSなどのファイル出力もできます。 gulp gulp is a toolkit for autom
Brackets上からgulp実行 - Qiita
やりたいこと エディタとしてBracketsを利用することを前提として... Brackets上でgulpのタスク (gulpfile.js) を修正。 Brackets上から実行させたい。 ※ Bracketsとは、Adobeが提供しているWebデザインに特化したテキストエディタです。（関連: Bracketsメモ) 追加するパッケージ Brackets-Gulp https://github.com/dalcib/brackets-gulp Bracketsの拡張機能マネージャーから追加できますが、これだけではダメでした。以下も合わせてインストールしています。 Brackets Shell https://github.com/johnhidey/hdy.brackets-shell/ Node.js bindings https://github.com/Acconut/bracke
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
JSテンプレートエンジン「Nunjucks」とgulpで快適HTMLコーディング
もうすぐハロウィン。アラフォーにもなって今週末にはじめて仮装してみることにしました ishida です。 はじめてのことで、何に仮装すれば迷いまくっています。 さて、今回は、テンプレートエンジン「Nunjucks」についてご紹介です。 Nunjucks とは FireFoxブラウザでおなじみmozilla謹製のJavaScriptテンプレートエンジンです。 Pythonテンプレートエンジン Jinja2 に影響を受けて、誕生しました。 githubでのstar数は、4660（2017/10/26現在）です。 Nunjucks 特徴 node.js で動作 マクロ定義 オートエスケープ リッチブロックの継承 extends によるテンプレート継承 block によるエリアの継承 include による外部ファイル読み込み などです。 記述サンプル 以下が、Nunjucksのコードサンプルです
GulpでSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと｜クロノドライブ
はじめに この記事はGulpを使ってSassをコンパイルしているけど、なんだかよくわかってないという人に向けた記事です。Sassをただコンパイルするだけではなく、AutoprefixerやMinify・Source mapなどあると便利だと思う必要最低限の構成の作り方とそれぞれの使い方を解説していきます。 前提 npmコマンドをなんとなく使ったことがある gulpfile.jsというものは知っている 目指す構成 Sassのコンパイルをする Source mapを作成する Minifyする Autoprefixerでベンダープレフィックスを自動的に付与する 1〜4のことをファイルの変更があったら自動的に行う 学べること Gulp実行までの手順 Gulpのタスクの作り方 Gulpのタスクの実行の方法 ファイル監視の方法 環境設定 まずはGulpを動かすための環境を整えましょう。Gulpを使った
最近使って便利だったgulpのプラグイン - 第1回 | toMemo - メモ的に色々書いていく個人ブログ
SassをCSSにコンパイル、画像の圧縮、svgスプライトの作成等など便利すぎて今の制作には欠かせなくなった「gulp」。 そんなgulpを制作を行う中で便利だと思ったプラグインを3つ紹介します。 merge-stream このプラグインは1つのタスクで複数のソースを処理するときに使用します。 Sassを使用する環境であればSassのファイルを分割しそれぞれの役割で管理しコンパイルで一つのCSSにまとめるという方法を使われている方をも多いと思います。 しかしSassを使用していない時代であればそれぞれのCSSで管理し、共通部分と各ページのCSSのディレクトリが違うということもあると思います。 追記 - ディレクトリ例がなかったので追記しました 下記ディレクトリであれば一つの箇所にありまとめているから通常のコンパイルでも問題無い src ┗sass ┠_reset.css ┠_layout.
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
必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA
みなさんはタスクランナーを使用していますか？ タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp（ガルプ）とGrunt（グラント）がよく使われています。 本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します（記事末尾で付録としてインストール方法を解説しています）。 ※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。 この記事は2018年12月にリリースされたGulp 4に対応しています ファイルの複製 作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
DATA SDY 2024 ✅ Pengeluaran HK SGP Cepat dari TOGELMBAH
Prediksi Top HK Archives: Rahasia Angka Togel Hongkong, SDY, dan SGPHalo, teman-teman pecinta togel! Kali ini kita bakal bahas tentang prediksi togel, yang bisa bantu kita menang besar di permainan Hongkong (HK), Sydney (SDY), dan Singapura (SGP). Ini akan jadi seru, dan kita bakal ungkapin rahasia tersembunyi dibalik angka-angka togel ini yang bisa ngebantu kita menang! Prediksi Top SDYTogel Sydn
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hirata.blog
まずは「gulp」を動かしてみよう！ ～セットアップとはじめてのタスク実行
Front-end Build Tools - JTF2014 Tokyo