タグ

gulpに関するU2no38kkoのブックマーク (7)

  • Gulp4がリリースされたのでgulpfile.jsをアップデートした - Qiita

    昨年(2018年)12月11日にめでたくGulp v4.0が正式リリースされたので、webサイト制作用gulpfile.jsの設定を見直してみました。 公式ドキュメント 迷ったらこちらを見直します。英語です。 - 入門ガイド - APIドキュメント Gulp4新機能おさらい では新機能を確認します。 1. タスクを直列処理するseries()と並列処理するparallel()メソッドが追加。run-sequenceプラグインはもう必要ない 2. watch()タスクはchokidarを使用したものに変更。gulp-watchプラグインはもう必要ない 3. lastRun()を使用して差分ビルドが簡単に。gulp-changedプラグインはもう必要ない 4. symlink()でシンボリックリンクを作成しpackage.jsonとnode_modulesを使いまわすことが可能に 5. ソース

    Gulp4がリリースされたのでgulpfile.jsをアップデートした - Qiita
  • node-sass でOS X 64-bit with Unsupported runtimeと言われた時の対策 – 塩焼きブログ

    下記のようなエラーが出た $ node-sass /usr/local/lib/node_modules/node-sass/lib/binding.js:13 throw new Error(errors.unsupportedEnvironment()); ^ Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v4.5.0 at module.exports (/usr/local/lib/node

    node-sass でOS X 64-bit with Unsupported runtimeと言われた時の対策 – 塩焼きブログ
  • gulp4.0に対応したgulpfile.jsの書き方はたった一箇所を変更するだけでOK!|ネットのすき間でヤッテキュー!

    gulpのバージョンが4.0となってから、これまでのコードではgulpは正常に動かなくなってしまいました。 色々と調べてみると、どうやらタスクは非同期ではなくて並列で実行される仕様に変更になったようです。 さらに大きな変更点は、gulp.taskの引数、gulp.watchの引数が変更になったこと。 [blogcard url=”https://satoyan419.com/gulp-v4/”] その影響もあり、今までどおりの書き方ではgulpが正常に動作することができません。 これ、けっこうハマってしまい困ってる方多いみたいですね・・・ gulp4.0にアップデートしたけど、急に使えなくなってしまってどうしようみたいな書き込みをわりとみかけました。 自分も3.9のまま頑張ろうか4.0にアップデートしようか迷いましたが、いとも簡単に対処できたので、その方法をご紹介します! gulp4.0を

    gulp4.0に対応したgulpfile.jsの書き方はたった一箇所を変更するだけでOK!|ネットのすき間でヤッテキュー!
  • gulp4.0にしました。 - cidermitaina

    大きい案件が始まるので、開発環境を整理したいと思っていたのですが、いろいろ考えた結果gulpのバージョンを4.0にしてみることにしました。 悩んでたこと ページ数の多い案件はgulp、ejsを使ってhtmlにコンパイルするっていう開発をしていました。 ですが、ページ数が多くなるとリロードが遅くなったり、何度もリロードされたり不安定な挙動でした。 原因はhtmlが変更されたらオートリロードが走るっていう記述のせいで、ejsでhtmlをたくさん吐き出すと毎回オートリロードが走ってしまい不安定な挙動になっていました。 そこで、htmlが変更されたタイミングではなくて、ejsが変更されてタスクが終わった後にオートリロードを走らせる処理に変更したいなあ、と考えていました。 やりたかったこと gulpのタスクの実行順を指定したかったのですが、いろいろ調べているみると、 ・ run-sequenceを使

    gulp4.0にしました。 - cidermitaina
  • gulp v4.0.0がプレリリース! 移行方法と変更点まとめ

    gulp v4.0.0がプレリリース! 移行方法と変更点まとめ 2018年1月8日 ※この記事は2018年1月8日に公開しましたが、2020年9月14日に内容をメンテナンスしています。 gulp 2018年1月1日に、gulp v4.0.0がプレリリースされました。この記事では、gulp v4への移行方法と、主な変更点をいくつか紹介します。 gulp v4への移行方法 まず、gulp v3からv4への移行方法について説明します。 gulpのグローバルインストール グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。 $ npm rm -g gulp $ npm install -g gulp-cli 参照:Quick Start | gulp.js gulpのローカルインストール ローカルインストールされているgulp v3を削除して、g

    gulp v4.0.0がプレリリース! 移行方法と変更点まとめ
    U2no38kko
    U2no38kko 2019/02/01
    “gulp v4.0.0”
  • Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita

    CSSの拡張言語Sassの強力な機能の一つは、ファイルを複数に分割できる「Partials」です。ファイルを機能ごとに分割することで、見通しのよいコードを記述できます。近年注目を浴びている「OOCSS」をSassで実現する上でもよく使われています。 しかし、分割するファイルが多くなればなるほど、大量の@importを記述したり、ファイル分割の度に@importを書き換える手間がかかります。エントリーでは、このような大量のimport文を短くまとめる方法について紹介します。 Sassのファイルの分割と問題点 例えば、_a.scssと_b.scssの2ファイルに分割したスタイル設定を、style.scssにて読み込む設定をしてみます。

    Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
  • gulpでWebFont作成を自動化 | Web雑記帳

    gulp-iconfontでweb-font作成を自動化 前の記事(WebFont作成をGrunt.jsで自動化)でGruntによるweb-font自動化をやったのですが、今日マークアップ勉強会がベースキャンプ名古屋で開催されていなたのでgulpでもやってみました。 参考 以下2つを参考に動かしてみました。[Tsutomu Kawamura]さんのコードを少しいじって動かした感じです。 https://www.npmjs.org/package/gulp-iconfont https://github.com/cognitom/symbols-for-sketch インストール 以下が今回インストールしたパッケージになります。 gulp gulp-consolidate テンプレートエンジンで使用 gulp-iconfont シンボルフォント作成のgulp-rename gulp-w

    gulpでWebFont作成を自動化 | Web雑記帳
  • 1