webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
昨今のweb開発で必要なwebpackやGulpといった技術は、Node.jsのパッケージ管理ツール「npm」を通して使われます。npmの機能は豊富で、覚えておくと便利な使い方がいくつもあります。とくにオススメのものをピックアップしました。 npm initには-yをつけると質問が表示されない npmのモジュールを用いたプロジェクトを作成する際、最初に使用するコマンドはnpm initです。実行すると、プロジェクト名や著作権の設定の質問が表示され、必要な項目を入力したり、Yes([Enter]キー）を入力する必要があります。 とくに設定が不要な場合、-yオプションを指定することで、質問を表示することなく初期化できます。 次に示すのは、npm initとnpm init -y実行後のコマンドラインの差です。npm initはnameやversionといった設定を対話形式で尋ねられますが、np
PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて済むかもよ！
Sass、Less、Stylusなどのプリプロセッサーよりも柔軟に、必要な機能を選んで使えるCSS変換ツール「PostCSS」。海外のフロントエンド開発界隈で普及しつつある人気ツールの導入方法とおすすめプラグインをチェック。 SitePointではPostCSSの記事を『An Introduction to PostCSS』『How to Use PostCSS with Gulp』『PostCSS Mythbusting: Four PostCSS Myths Busted』などで何度も特集してきましたが、いまだに多くの人が混乱してしまっているようです。PostCSSを一言で表すと、 PostCSSはうんざりするような仕事をあなたの代わりに処理してくれるものです PostCSSはSass、Less、StylusのようにソースコードをCSSにコンパイルする、簡潔なプログラミング言語を提供す
gulpで階層構造を維持して出力する - knowledge base
以下のようなディレクトリ構造になるようgulpを用いてSassのコンパイルを行います。 devディレクトリがSassファイルを格納する開発用、destディレクトリがコンパイル後のCSSファイルを格納する納品用ディレクトリです。 root │ ├─ dev │ ├─ scss │ │ ├─ top │ │ │ └─ top.scss │ │ └─ products │ │ └─ products.scss │ │ │ └─ gulpfile.js │ └─ dest ├─ top │ └─ top.css └─ products └─ products.css Sassのコンパイルをするタスクとして、以下のようなサンプルがオーソドックスな例としてよく紹介されています。 var gulp = require('gulp'); var sass = require('gulp-sass'); g
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
New_Sass_Module_System.pdf
gulp: The Good Parts
gulpでCoffeeScriptを使う方法まとめ - Qiita
Gulpでタスクの対象外にしたいファイルやディレクトリを指定する | Webデザインのタネ