帰ってきたGulp 4 - Qiita
2014年あたりから、v4が出なくてやきもきしていましたが、待つこと3年(4年?)、2018年のはじめにv4.0.0がリリースされました。2018年現在の視点で、v4をチェックしてみたいと思います。 タスクは関数に 以下、GitHubにある例からの抜粋です。(多少変形しています) import {src, dest} from 'gulp' import less from 'gulp-less' import rename from 'gulp-rename' import cleanCSS from 'gulp-clean-css' export default () => src('src/style.css') .pipe(less()) .pipe(cleanCSS()) .pipe(rename({basename: 'main', suffix: '.min'})) .pip
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
Rollupがちょうどいい感じ - Qiita
昨年の途中からちらほら耳にするものの、まだ「なにそれ美味しいの?」なRollupですが、馴染むと手放せなくなる感じ。どんなものか、使い方から、プラグインのつくりかたまで、概観してみたいと思います。 Rollupって何? 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など。大きな特徴として、次の点がよく挙げられます。 生成ファイルが小さい ES6(ES2015)ネイティブ ドキュメント類はまだ最低限という感じですが、WebPackかBrowserifyにさわったことがあれば、そんなに迷うことはないかも。ただ、トップページに行っても正直よくわからないので、今のところWikiが一番の情報源です。公式の情報で見るべきとこ
Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita
楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の
gulpfile スタイルガイド - v0.5.0 - Qiita
このドキュメントは、gulpfileの再利用性/メンテナンス性を高めることを目的とした、非公式なスタイルガイドです。 更新情報 2014/10/05 - バージョン番号つけました。 2014/10/04 - 「タスク辞書」あらため「タスクの共有」に。以前の内容はgulpfilesとして別ドキュメントに。 はじめに gulpfileはgulp.jsのタスクを定義するファイルです。スクリプトファイルなので自由に書ける反面、プロジェクトが大きくなると、書式を統一が問題になります。そんな時、このスタイルガイドが役に立つでしょう。対象となるのは次のようなケースです。 gulp.js に慣れて来て、再利用性のあるタスクを書きたい チームで運用する必要があり、書式を統一したい スタイルガイドとして、下記を参考にしています。また、ここで述べない JavaScript / CoffeeScript の言語と
3時間でできるnpmモジュール - Qiita
「3分でできるnpmモジュール」に、公開のための手順がまとめられていて分かりやすかったので(感謝)、実際に3時間でモジュールを作ってみました。そのときにやったことのメモ。 (ちなみに、作ったのはPhantomJSをgulpから使いやすくするプラグインgulp-phantomです。よかったら使ってください〜) なにするの? モジュールのお膳立て 実装 GitHubにソースコードを置く npmに公開する 1時間目 まずはお膳立てから。最低限、必要なファイルはこのあたりです。1時間目に、太字のファイルからやっつけます。 package.json .npmignore .gitignore .travis.yml index.js test/ LICENSE README.md package.json こんな感じのやつですね。公開しないプロジェクトだと、dependencies以外、省略している
gulp.js チートシート - Qiita
チートシートで使われているサンプルコード コマンド gulpをグローバルにインストール: $ npm install -g gulp gulpをローカルにインストール: $ npm install --save-dev gulp $ npm install --save-dev gulp-other-plugins タスクを実行: $ gulp task_name 複数タスクを実行: $ gulp task_name other_task JavaScript: gulpfile.js Single Dest & Watch Multi Dest Incremental Rebuilding Only Changed Async Streams Serial Join Stream Array CoffeeScript: gulpfile.coffee Single Dest & Watc
gulp 3.7 リリース: CoffeeScriptネイティブに - Qiita
今回のアップデートの目玉は、やはりCoffeeScriptなどのaltJSをデフォルトでサポートするようになった点です。その他、--tasks-simpleオプションが用意されたのは、gulpと連携したアプリを作ろうとしていた人には朗報です。(実際、経緯としてはgulp-appからのニーズで追加されました) 合わせて、gulpコマンドの自動補完が改善されています。今までのバージョンで自動補完を使っていない場合は、ぜひ。Bash, Zsh, Powershell対応です。 以下、リリース文を転載しておきます。 update vinyl-fs to remove BOM from UTF8 files add --tasks-simple flag for plaintext task listings updated autocomplete scripts to be simpler an
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
gulpは、destの後にもアクションを繋げられる - Qiita
gulpのAPIマニュアルにも書かれていますが、gulpでは、gulp.destを書いたからと言って、そこで終わりにする必要はありません。 注: 下記、CoffeeScriptで書いてますが、gulpの標準はJavaScriptです。適宜読み替えてください。 例: 複数ディレクトリに出力する 例えば、こんな風に書けば、3つのディレクトリにテキストファイルをコピーできます。 gulp = require 'gulp' gulp.task 'multi-dist', -> gulp.src ['./src/*.txt'] .pipe gulp.dest './dist1/' # 1つ目のdest .pipe gulp.dest './dist2/' # 2つ目のdest .pipe gulp.dest './dist3/' # 3つ目のdest gulp = require 'gulp' co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちゃんと使い分けてる? dependenciesいろいろ。 - Qiita