[B! gulp] Satoh_Dのブックマーク

gulp-sassとgulp-ruby-sassの違いをざっくりと調べた | おれめも v2

C/C++で書かれたLibsassをwrapしているnode-sassを使用。 Sassのgemをインストールしなくてもgulp-sassのみで使用可能。 Sassのgemを使用。 gulp-ruby-sassを使用するときは、あらかじめgemのインストールが必要。処理速度処理速度はgulp-sassのほうが速いらしい。 gulp-ruby-sassは一度gemに処理を投げているからなのかな…？出力形式出力形式はgulp-ruby-sassのほうが豊富(nested/compressed/compact/expanded)。 gulp-sassはLibsassが'nested’, ‘compressed'の2つしかサポートしていないため。書き方 gulp-sassでコンパイルするときは、ソースの指定で /*.scss のような指定方法が可能。また、ソースの指定には gulp.src

Satoh_D 2015/04/14

本日書いた記事です & 追記しました

sass
gulp

リンク

gulpfile スタイルガイド - v0.5.0 - Qiita

このドキュメントは、gulpfileの再利用性/メンテナンス性を高めることを目的とした、非公式なスタイルガイドです。更新情報 2014/10/05 - バージョン番号つけました。 2014/10/04 - ﹁タスク辞書﹂あらため﹁タスクの共有﹂に。以前の内容はgulpfilesとして別ドキュメントに。はじめに gulpfileはgulp.jsのタスクを定義するファイルです。スクリプトファイルなので自由に書ける反面、プロジェクトが大きくなると、書式を統一が問題になります。そんな時、このスタイルガイドが役に立つでしょう。対象となるのは次のようなケースです。 gulp.js に慣れて来て、再利用性のあるタスクを書きたいチームで運用する必要があり、書式を統一したいスタイルガイドとして、下記を参考にしています。また、ここで述べない JavaScript / CoffeeScript の言語と

Satoh_D 2015/03/31

リンク

gulpタスク実行中にエラーが出たらデスクトップ通知を出す - Qiita

watchしながら作業してるときにコンパイルエラーなんかが起こってたときに、ターミナルにエラーメッセージが出てるけど気づけないときがあったので通知を導入した。 gulp-notifyを使う gulp-notify gulp-plumber エラーが出たときにgulpを終了させないgulp-plumberと、通知を出すgulp-notifyを使う。 gulp-plumberはタスク実行中にerrorイベントが発生したときに実行するerrorHandlerを指定することができる。errorHandlerにnotifyを指定すれば通知を出せる。 gulpfile CoffeeScriptのコンパイルを例に。 var gulp = require('gulp'); var plumber = require('gulp-plumber'); var notify = require('gulp-n

Satoh_D 2014/08/15

gulp

リンク

おれおれgulpfile.jsをGithubに置いた | おれめも v2

今まで新規ページを作成する際、以下の手順を踏んでいました。作るページのディレクトリを作成ローカルにあるディレクトリ(gulpfile.js, package.json置き場)からコピペ環境構築これだと今のPCで作業する分にはいいかもしれないけど、別のPCで作業するときに困る。あと、バージョン管理も出来ない…。そんな状況を解消するためにファイルをGithubに置きました。 Satoh-D/gulpfileこれで新規のプロジェクトを作成する際は以下のコマンドを打つだけでいいのでおｋになります。git clone git@github.com:Satoh-D/gulpfile.git [project_directory] cd [project_directory] rm -rf .gitnpm install いやー、とっても便利ですね。

Satoh_D 2014/08/13

オレオレgulpfile.js

orememo
gulp

リンク

グローバルにインストールしたgulpをバージョンアップする | おれめも v2

今までgulp3.8.6を使ってたんですが、いつの間にか3.8.7が出てたんですね。ローカルのディレクトリにインストールした際に気づきました。グローバルとローカルでバージョンが違うのは気分的に良くないのでバージョンを上げてみました。その際のメモをまとめます。注意バージョンアップをすることでプラグインが動かなくなったり、gulpfile.jsの書き方が変わることがあるかもしれませんので、注意して実行してください。やり方は結構簡単ざっくり言うと、gulpをアンインストールした後に再度インストールすればよいです。簡単ですね。一応それぞれの工程を見て行きましょう。グローバルのgulpをアンインストールターミナルを開いて次のコマンドを打ちます。 sudonpm uninstall -g gulp これで一旦グローバルのgulpがアンインストールされました。再度gulpをインストー

Satoh_D 2014/08/11

バージョンアップ方法について書きました

orememo
gulp

リンク

Web Starter Kitのgulpfile.js内で使用されているプラグインについて調べてみた | おれめも v2

最近話題になっていますね、Web Starter Kit。タスクランナーにGulpを使っているとのことで、早速中身を確認してみました。その中で使用されているプラグインについてまとめました。以下がgulpfile.js内に記述されているプラグイン一覧です。 browser-syncdelgulp gulp-autoprefixergulp-cachegulp-changedgulp-cssogulp-ifgulp-imagemingulp-jshintgulp-load-pluginsgulp-minify-html gulp-replacegulp-ruby-sassgulp-sizegulp-uglifygulp-uncss gulp-userefjshint-stylishpsirequire-dirrun-sequenceそれぞれどのようなプラグインなのかを見ていきます。 brows

Satoh_D 2014/08/09

gulpfile.js調べました！

orememo
gulp

リンク

GulpでSassのファイルをwatchし、コンパイルする | おれめも v2

前回の記事で、Gulpのインストールまで出来ました。今回はSassのファイルを監視し、変更されたらCSSにコンパイルするところまで書きます。ディレクトリ構成今回、以下の様なディレクトリ構成になっています / ├― gulpfile.js ├― package.json ├― node_modules/ │ └ 諸々のモジュール郡 ├― scss/ │ └ layout.scss └― css gulpfile.js: gulpのタスクが記述されたファイルpackage.json: このプロジェクトで使用しているgulpの設定ファイルnode_modules: gulpでインストールした諸々のファイル群scss: Sassファイル群css: コンパイルされたSassファイルの格納場所使用するプラグイン以下のプラグイン及びメソッドを利用します。 Sassファイルのコンパイル: gulp-s

Satoh_D 2014/07/30

Gulp楽しいよGulp

gulp

リンク

gulp始めました | おれめも v2

最近gulpという単語をよく目にするようになりました。 gulpとは何ぞや？と思い調べてみると、Gruntと同じようなタスクランナーらしいです。 Gruntよりタスクが書きやすい/見やすいとこと。とりあえず使ってみようということで導入してみました。その際のメモを記述しておきます。 glupのインストール黒い画面を開いて以下のコマンドを入力 sudonpm install -g glup glupのインストール時にエラーが出る場合は、npmのバージョンが古い可能性がある。その場合は以下のコマンドを入力してnpmのバージョンを最新のものにしてください。 sudonpm install -g npm インストールが完了したらバージョンを確認してみます。バージョンが表示されればインストール完了です。 glup -v [glup] CLI version 3.8.6 [glup] Loc

Satoh_D 2014/07/29

インストール方法とか書いた

gulp
orememo

リンク

isoden.me

isoden.me GitHub Twitter Blog

Satoh_D 2014/07/28

gulp

リンク

タスクランナーgulp.js最速入門 - id:anatooのブログ

相変わらず仕事ではデザインやりつつJavaScript書いている。タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu

Satoh_D 2014/07/28

gulp

リンク

gulp 覚え書き - WebDelog

Satoh_D 2014/07/28

gulp

リンク

タスクランナーgulp入門

タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。公式サイトでインスト

Satoh_D 2014/07/28

gulp

リンク

gulpでJavaScriptの結合圧縮処理

gulpでJavaScriptの結合圧縮処理 gulpでJavaScriptの圧縮処理を設定してみました。ご想像の通りuglifyJSですが@readymadego goに教えてもらったuseminというプラグインも合わせて利用します。 gulpの使い方は﹁タスクランナーgulp入門﹂を参照してください。まずは圧縮用のgulp-uglifyとgulp-useminをインストール。 sudonpm install gulp-uglify gulp-usemin --save-dev 今回の設定の肝はgulp-usemin。これを利用するとHTML上に直接圧縮処理の設定を記述できます。たとえばHTMLを以下のように設定した場合、useminを実行したらscript1.jsとscript2.jsを圧縮結合したscript.min.jsというファイルを生成しHTML上のscriptの呼び出しを

Satoh_D 2014/05/16

gulp
js

リンク

はてなブックマーク

タグ

関連タグで絞り込む (4)

gulpに関するSatoh_Dのブックマーク (13)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス