先日sassをコンパイルした際に、gulp-combine-media-queries、メディアクエリをcssの下の方に整えるプラグインを入れていたんですが・・・・ cssを見てみたら整えられてない！なんで！？ 先輩に教えていただき、問題解決とアドバイスをいただいたので、共有させていただきます・・・・。 20190401追記： 保存するたびにsassは以下全てコンパイルしてましたが、更新かけたやつだけコンパイルする都合があったのでgulp-changedを入れました。 var gulp = require('gulp'); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var changed = require('gulp-changed');//20190401追加 var sourcema
Gulpのインストールは1つでOK。複数のプロジェクトごとに設定ファイルを分割、さらに監視を行い、更新があったファイルのみタスクを実行させる方法 「1つの開発環境で複数のプロジェクトを管理」することって私はよくあります。 これまでは「プロジェクトが増えるたびにGulpをインストールする」運用をしていました。 ですが、この運用を続けていくと、プロジェクトが増えるごとにGulpのインストールが必要だし、npmパッケージやgulpプラグインも更新しないといけないし、タスクもプロジェクトごとに作る必要があるし、何よりディスク容量が増えてしまいますね。 図で表すと、以下のような状態です。 プロジェクトが増えるたびにGulpをインストールの図 これはあまり効率的とは言えない・・・ というわけで、この状態を解消するため「Gulpのインストールは1つにして、複数のプロジェクトを分割して管理する」方法を書き
あんまり無いと思うんですが、ひとつのリポジトリ内でそれぞれ独立した案件のディレクトリを切っているケースに遭遇しました。 そしてその中にそれぞれ Gulp が入ってる、みたいな。 こんな感じです。 template gulp source project1 gulp source project2 gulp source project3 gulp source で、みんな同じ Gulp task を保有しており、案件が発生する度に template のファイルを copy してそこから拡張していきます。 node_modules とかも全部それぞれのディレクトリ内で管理されてしまっているので、リポジトリが無駄に肥大化＆ init がめんどくさい。 ので、Gulp を外に出して npm scripts を実行する際に option を指定することでそれぞれのディレクトリを包括的に管理できるよ
gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないというときがあります。 そんなときに使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。 !（エクスクラメーションマーク）を使う 結論から書くと、除外したいディレクトリやファイルのパス指定前に**!（エクスクラメーションマーク）**を記述すれば除外指定することができます。 何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば特定のディレクトリ・ファイルを除外指定できます。 実際の使用例 「!（エクスクラメーション
作成：2015/06/22 更新：2018/05/27 Mac > Web制作 Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Node.jsとは Node.jsをインストールする Mac版バージョン管理ツール：nodebrew Windows版バージョン管理ツール：nodist パッケージマネージャー npmの使い方 gulp（ガルプ）のインストールと使い方 Node.jsとは ご存知な
ファイル構成 project ├── node_modules ├── public_html ├── resource │ ├── **/*.html │ └── common │ ├── css │ ├── images │ ├── js │ ├── sass ├── gulpfile.js ├── package.json ├── .csscomb.json こちら、構成としてはresourceフォルダがいわゆる作業用ファイル群で、public_htmlがgulpで出力した納品用ファイルとなります。 なので、当然ですがpublic_htmlはほぼ触りません。 つまり、resourceフォルダとpublic_htmlフォルダの中身って、ほぼ一緒になります。 以前は同一フォルダにgulp.destしてたんですが、sassフォルダが邪魔だった
フロントエンド開発に便利なNode.js環境で、ファイル変更時に自動でSass(SCSS)からCSSファイルを生成したい。 2016-06-17 追記 上位互換記事を書きました。 gulp-sassで自動でSass/SCSSからcssファイルを生成したり、他にもいろいろする - 人生リアルタイムアタック 準備 以下のようなディレクトリ構成を想定。 . ├── css │ └── // cssファイルの生成先 └── assets └── sass └── main.scss インストール gulpとgulp-sassをインストールする $ npm install gulp gulp-sass gulpfile.jsの作成 まずは最も簡単な例として、*.scssに変更があれば自動で*.cssを生成する例。 var gulp = require('gulp'); var sass = re
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
はじめに Grunt、ようやく馴染んできたと思ったらこれだよ。 ガルプと読むそうです。ゴクゴクという意味らしいです。 gulp とは gulp.js 2014年初めあたりから徐々に広まっていった比較的新しいビルドツールです。 やってくれる内容は大体 Grunt と同じ、そして同じく node.js のパッケージです 以前 「Grunt のインストールから基本的な使い方まで」という記事を書きましたが、 導入方法などもかなり似通った部分が多いので、Grunt の経験があれば抵抗なく始められるかと。 Grunt よりも設定ファイルがわかりやすく、記述量が少なくてすみます。 以下、gulp 公式サイト に書かれている特徴を簡単に。 Easy to use （シンプルなコードで使いやすい！） Efficient （Node.js のストリームで効率的！） High Quality （厳格な
Gruntfile.js は常々長すぎると思っていました。複数ファイルに分割しようが長いものは長いです。 最近、後発の gulp というものを見つけて使ってみていますが、いい感じです。 設定ファイルが短く書ける上に、速いです。 先日 Grunt 入門の記事「Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩」を読んで、例の Gruntfile.js と同等の内容を gulp で書いたらどうなるかなと思って書いてみました。 サンプルファイル含めたプロジェクト全体 gulpfile.js だけ 67 行から 29 行に。約半減です。また、短くなっただけではなく、処理の流れがわかりやすくなっていると思います。 var gulp = require('gulp'); var concat = require('gulp-concat'); var prefix
メリークリスマス！ このブログは、HTML5 Advent Calendar 2013の12/25用です。 とはいえ、HTML5カンファレンスとかあったせいで、最近あまり技術的なトピックを追っておらず・・・ ここは、つい最近目にした gulp というプロダクトを触ってみたレポートでもしようかと思います。 Node.js製なので、実はHTML5ともあんまり関係ない。すいませんすいません gulpは、自身のことを「ストリーミング・ビルド・システム」と称しています。つまり、Gruntなどと同カテゴリの「ビルド用ツール」です。 Gruntは、JSON形式で宣言的にタスクのパラメータを記述していく形式です。慣れればスッキリしていて見やすいし、設定を変更するのも容易なのですが、細かくタスクの動作を制御する必要が生じた時に「何をどうすれば求める結果が得られるのか？」がわかりにくいという欠点があります。あ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く