レッスン一覧 料金プラン ログイン 2024/07/11 NEW 【週刊ドットインストール】 ロードマップ相談の現場から、レッスン制作の進捗、HTML/CSSを極めるコーナー 2024/07/11 NEW HTML ってなんのため? - HTML / CSS を極めるコーナー 2024/07/10 NEW 『Laravel入門 CRUD操作編』をリリースしました 2024/05/07 NEW あなただけの学習ロードマップを作成します 【随時受付中】
gulpのタスクは基本的に非同期で実行されます。例えば以下のコードでは、ファイルコピーが完了する前に "done" と表示される可能性があります。 gulp.task('copy', function() { // ファイルをコピー gulp.src('src/file').pipe(gulp.dest('dest')); }); // copyに依存するタスク gulp.task('done', ['copy'], function() { // ファイルコピー完了「前」に実行される!! console.log("copy done"); }); gulpが高速に動作する理由の一つはこの非同期性ですが、どうしても同期的に処理したい場合(すなわち特定のタスクの完了を待ってから別なタスクを実行したい場合)もあると思います。 この記事では同期的にタスクを実行する方法として、gulp API d
最近gruntよりgulpの方が熱い!という噂を聴いてバリバリgrunt派だったのですがチャレンジしてみました。 インストールとかは同じnode関連なのでnpm使えば簡単にできるので、この辺りgruntと大差なく導入できるなぁ〜って印象でした。 gruntで言うところのwatchがgulp自体に含まれてるっぽいので、gruntより最初の段階でnpm install する量は少なくて済みますね。ハラショー!! インストール関係はこちらを参考にしました。 liginc.co.jp いつもやっている、javascriptの結合とmin化をするタスクを書いてみました。 プロジェクトのpackage.jsonを作る。 node.jsが必要なので、インストールされてない場合は下記リンクなどを参考にインストールしておいてください。 Macにnvm + Node.jsをインストールする - Qiita プ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
2015-05-26 【保存版】Gulp初心者必見!導入に失敗しないための7つの手順 Web制作の現場 脱にわかフロントエンドエンジニア!シリーズの第二弾!!! 勝手にシリーズ化してますがw 第一弾もご参考にw 【フロントエンド向け】脱にわかフロントエンドエンジニア!Macでコーディング環境を整えたい人はこれだけは抑えておこう! - 学校では教えてくれないWeb制作の現場www.web-genba.com ということで、今回はGulpのお話。 Mac環境を前提にお伝えしていきます。 gulp.js - the streaming build system ぐぐれば、いろいろと情報がでてきますので、設定に詰まったら調べてみてください。 【1】Node.jsをインストール まずは、公式サイトからインストーラをダウンロード。 http://nodejs.org/ 簡単にインストールできま
目的 Grunt と違って Gulp は登録したタスクが並列で実行されていきます。 しかし、Gulp のタスクも自在に直列/並列化したいのです! 方法 調べたらよいものがありました。run-seqence を使うだけ。 記述例 図のように clean タスクが終わったら並列に jade、sass、coffee タスクを実行。これらのタスクが全て終わったら deploy タスクを実行と言うように、3 段階にタスクを直列、その中で複数のタスクを並列にします。 var runSequence = require('run-sequence'); gulp.task('default', function(callback) { return runSequence( 'clean', ['jade', 'sass', 'coffee'], 'deploy', callback ); });
はじめに もはやgulpのコードなんて巷にあふれているかと思いますが、 個人的によく使うものをスニペットとしてまとめてみました。 現在私は中小規模の静的サイト、いわゆる普通のコーポレートサイトや動的サイトのモックなどを制作することが多く今回はそういったシンプルな案件で、よく使っているものになります。 対象となるかもしれない方 個人的なメモではありますが、まだまだ不慣れな方にも役立つかもと思い投稿しました。 私が独学でタスクランナーの勉強を始めた時に一番困ったのが、やりたいことに対してオーバースペックな情報が多く(最低限理解して)実際に動作させるまでに、かなり時間が掛かってしまったことでした。 これらのスニペットでとりあえず動作はするかとは思いますので、色々と試すきっかけにでもなれば幸いです。 gulpのインストールや基本的な使い方は、既に良い記事がたくさんありますのでここでは割愛します。
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。 今回は、細かい便利な機能をgulpに乗せてみましょう。 今までの記事はこちら gulp入門その1―とりあえず動かすところまで gulp入門その2―ファイルの監視をしてみる もくじ 同期処理をする ローカルサーバを立ててライブリロードする CSSのminifyしたりプロパティを並び替えたりする package.jsonでモジュールを管理する まとめ ※今回は手順にプラグインのインストールを含めません。 インストール方法は前回・前々回の記事を参照にしてください。 同期処理をする 初回からさんざん書く書く言っていた同期処理です。 そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。 そこでru
ここのところのgulpの勢いに負けて、自分もついにGruntからgulpに移行しました。gulpはGruntと同様フロントエンド開発用のタスクランナーです。最初はGruntとそれほど変わらないだろうと思っていましたが、タスクを書いてみるとその違いがすぐにわかりました。シンプルに書けるだけでもgulpはかなり良いです。今回、自分の理解を深めるついでに基本的なタスクの書き方をまとめてみました。 gulpの特徴まずgulpの特徴を簡単に書いていきます。 ストリーム: gulpは、「the streaming build system」と言われているようにNode.jsのストリーム(ファイルのパスとファイルの中身の情報を持ったオブジェクト)を使って処理を行っていきます。そのため中間ファイルを生成することなくタスクが実行されていくため高速に処理がなされます。並列処理: さらにgulpは、処理が一つ一
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか?タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし!今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト! gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ!」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます! Gruntとの違
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く