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

Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA

ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"

s99e209 2016/06/03

「Gulp」や「Grunt」に代わるタスクランナー「npm-scripts」の実行方法。

リンク

[意訳]私がGulpとGruntを手放した理由 - Qiita

このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。（以下、訳）私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。例を挙げましょう私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mochaなどを統合するのは本当にたいへんでした。なぜでしょうか？それは、プラグインによってはドキュメントが不十分だったり、APIの一部しか公開されていなかったためです。これらを解決しようと思えばできました。しかしなんとそれらのツールを直接使用すると不具合が

s99e209 2016/01/29

Node.jsが進化して Gulp と Grunt は不要な抽象化レイヤーになった。npm script を使えばツールを直に使うことができる。

リンク

Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！

Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。左側に

s99e209 2015/11/20

デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」や、ブレークポイントを設定してデバッグなどができる。

リンク

【gulp】「gulp-htmlhint」でHTMLの文法をチェックする方法をメモメモ | バシャログ。

みなさま、こんにちは。hulu で「めぞん一刻」を見て、最終回でボロ泣きした kouraku です。記憶に残る思い出深い作品だったということと、大人になり結婚した今だからこそ分かる想いなんかが色々と重なって（単純に涙もろくなってきた、というのもありますが（苦笑））、最後の最後でどっと感情が溢れ出てしまった、といった感じでしょうか。いや～、名作はいつ見ても感動を与えてくれるものですよね。さて今回は、前回までにご紹介したHTMLテンプレート「gulp-html-extend」で出力したコードに誤りがないか、例えば閉じタグが無い・・・とか、imgタグにalt属性が無い・・・とか、そんなものをチェックサイトにコピペして確認とか面倒なので、gulpにある程度任せてみたいと思います。そこで、白羽の矢が立ったのが「gulp-htmlhint」ですね。では、このプラグインの使い方についてメモメモ。 ※前

s99e209 2015/10/15

html の文法チェックプラグイン「gulp-htmlhint」のインストールと使い方。

gulp
html

リンク

sprite画像はもう終わり？gulpでIcon Fontをつくろう！ | Goodpatch Blog

こんにちは。太朗です。最近案件で使ったアイコンフォントが便利だったのでご紹介致します。アイコンフォントのメリットスプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！アイコンフォントをgulpで作るでは、どうやってアイコンフォントを作るのか？作り方は色々ありますが、一番手っ取り早いのはgulpで自動で生成させることです。なおgulpのインストールなどは省略させてもらいます。以下がgulpファイルの例です。 gulp.coffee 'use strict'; gulp = require 'gulp' $ = require('gulp-load-plugins')() # svg を圧縮する gulp.tas

s99e209 2015/01/26

gulpでアイコンフォントが作れるのか。試してみよう。

gulp

リンク

タスク自動化ツール「gulp」を使って制作時間を短縮しよう

2014年12月24日 Webサイト制作, 便利ツールみなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違

s99e209 2014/12/24

Webデザイナー向けの便利なgulpプラグイン。

リンク

Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコデメリット記述がよりNodeに近くなるため、複雑なことは敷居がやや高めプラグイン開発のためのドキュメントが少ない今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！そんな環境を作りたいと思います。 1. Node.jsをインストールまずはNode.jsをインストールしましょう。 Node.js http://nodejs

s99e209 2014/09/19

Gruntとの違いが解りやすくまとまってる。

gulp

リンク

まずは「gulp」を動かしてみよう！～セットアップとはじめてのタスク実行

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

s99e209 2014/08/20

MAC環境で「gulp.js」を動作させるまでの手順。

gulp

リンク

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