タグ

gulpに関するochanoco_naocoのブックマーク (6)

  • npm で依存もタスクも一元化する - Qiita

    タスク管理 package.json にはパッケージの依存を書いて npm install するのが基だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、

    npm で依存もタスクも一元化する - Qiita
    ochanoco_naoco
    ochanoco_naoco 2016/09/14
    タスクをなんでpackage.jsonに書くかすっきりした
  • » gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう | isee ウェブに関するブログ

    gulp-autoprefixerよりも高機能なgulp-pleeeaseの紹介。いろいろやってくれるとても良いやつ。gulp-autoprefixerはもう古いかも? css3を使ってスタイルを記述する際にベンダープレフィックスを自動で付けてくれるgulp-autoprefixer。とても便利ですよね。 しかし、gulp-autoprefixerよりも高機能でいい感じなのが、pleeeaseです。pleeeaseはベンダープレフィックスを付けてくれるだけでなく、cssのminifier(圧縮)、mqpacker(メディアクエリをまとめる)、remのpx変換などをいっぺんに処理してくれます。 gulpで簡単に使うことができるので、早速導入してみましょう。 gulpって??という方→GulpでSassのコンパイルとlivereloadをやってみる gulp-pleeeaseのインストール

    » gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう | isee ウェブに関するブログ
  • タスクランナーgulp.js最速入門 - id:anatooのブログ

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

    タスクランナーgulp.js最速入門 - id:anatooのブログ
  • gulp.js その2 gulp-webserverでWebサーバー/ライブリロード - Qiita

    gulp-webserverプラグインは、開発用のWebサーバーを簡単に立ち上げることができるgulpプラグイン。gulp-connect(すでにdeprecated)を書き直したものである ライブリロード機能も付いてるので gulp-livereload などは不要。ブラウザで表示確認しながら作業に専念することができる node.jsのサーバーなのでPHPは動かない。PHPを動かしたい場合はApache(MacならMAMPにも含む)やnginxを使うこと インストール・使い方 gulpがインストールされていることが前提 gulp-webserver プラグインのインストール npmで開発用としてインストール npm install --save-dev gulp-webserver (今回はプロジェクトディレクトリに入れる。-g オプションでグローバルに(ホームディレクトリ直下)) gu

    gulp.js その2 gulp-webserverでWebサーバー/ライブリロード - Qiita
  • gulp.js その1 概要・基本 - Qiita

    家サイト:gulp.js Grunt でなく gulp を使う理由 自動化するタスクを登録する設定ファイルを見比べると、gulpの方がはるかにすっきりしていて可読性高い。 新参のgulpはGruntに比べるとプラグインが少ないが、人気があるので今後充実していくだろう。 ルール等をきっちり決めるチーム運用の場合は、Gruntの方が良いらしい。 下記の記事が参考になった。 Gruntとgulpを比較 〜 JSおくのほそ道 ビルドツールまとめ。GruntとかGulpとか (フロント寄り) Build Wars: Gulp vs Grunt(スライド) gulp でできること プラグインを追加することで、様々な処理を自動化できる。例えば… Webサーバー/ライブリロード(gulp-connec) ライブリロードのみ(gulp-livereload) Sass、Compass、CoffeeScri

    gulp.js その1 概要・基本 - Qiita
  • SassとGulpを使った便利なメディアクエリの記述方法とアウトプットの最適化

    先日このブログのデザインをリニューアルしたときに、メディアクエリの記述が結構手間だったので、記述のしやすさ、メンテナンス性の良さ、また、最終的なCSSファイルの最適化の3つの観点から、便利な書き方と最適化の方法をまとめてみました。 目次 モバイル・ファーストCSSで書く 要素ごとに、Sassを使って記述する Gulpを使ってメディアクエリの整理する まとめ モバイル・ファーストCSSで書く メンテナンス性の良さや重複の少ないよりシンプルなCSSの記述を目指すと、モバイル・ファーストCSSで書くのが良いです。デスクトップ・ファーストCSSで書く場合、小さい画面向けにはスタイルを追加するというより、消していく(または、上書きして帳消しにする)作業が多くなってしまいます。 このブログはモバイルからのアクセスが1割程度なので、今回のデザインのリニューアルでは、

    SassとGulpを使った便利なメディアクエリの記述方法とアウトプットの最適化
  • 1