gulpとbabelとwebpackというフロント開発３銃士 - Qiita
gulpはJavascript製のタスクランナーです。 例えば、 cssファイルが増えて大変だから一つにまとめたい！ とか、 lessをcssにコンパイルしたい！ とかをJavascriptの記述でタスク化することができます。 ... gulp.task('less2css', (callback) => {//lessをcssにコンパイルするタスク return gulp.src([//対象を指定 "./src/main/resources/static/less/**/*.less" ]) .pipe( plumber() )//エラーが起きた際によきに計らってくれるおまじない★ .pipe( less() )// lessをcssにコンパイル .pipe( gulp.dest("./src/main/resources/static/css/") );//コンパイルしたファイルを吐き
Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt
はじめに HTML／JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの本質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。 プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。本記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTML／JavaScript開発で必要となる、以下のような定形作業を自動化できます。 ファイル操作（移動、コピー、削除、名称変更、結合） ネットワーク通信（FTP、SSH
gruntやgulpでSSIを利用する
Webサイトの設計・実装時に、Gruntのgrunt-contrib-connectを利用してWebサーバーを立ち上げているのですが、ApacheのようにSSIが使えたらなと思うことが時々ありました。 今日「node.js ssi」でGoogle検索をしてみると、偶然1位にssi - npmを発見しました。さらに調べていくと、connect-ssiというMiddlewareを見つけました。テストしてみたところ、<!--#include file="foo/bar.txt" -->の記述で、bar.txtの内容がインクルードされました。これは使えそうです。 ただ、次の3点の問題があり修正してプルリクエストを送信しました（慣れていない上に英語が苦手なので申し訳ない感じですが...）。これらは取り込まれ、バージョン0.1.3として公開されました。 /foo/にアクセスした際に、/foo/inde
Gruntで開発用と公開用のディレクトリを分ける
前々回前回Grunt、相変わらずちょいちょい弄って便利になるようにやってる。触り甲斐があって面白い。 今回は、開発用と公開用でディレクトリを分けるっていうのをやります 参考にさせていただきましたGruntで効率化！ リリース前の面倒な作業をまとめる | MONSTER DIVE【モンスターダイブ】grunt.js - grunt-contrib-connectでのルートフォルダ指定 - Qiita [キータ]ほぼ上記お二人の書き方丸パクリです!!!すみません!!!!ありがとうございます!!!!! この2記事と前回前々回とやって来たものを組み合わせた感じになっている。 やりたいこと開発時フォルダ監視Sass/Compassのコンパイルファイル保存時にブラウザを自動リロード公開時公開用ディレクトリにファイルをコピーHTMLのminifyCSSのプロパティを整理CSSのMedia Queries
2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編） | SONICMOOV LAB
もーいーくつねーるーと～、おーしょーうーがーつー♪ という所で、今年も残り 10 営業日を切りましたね・・・・！早いですね！ 皆さまいかがお過ごしでしょうか♪ 世間はクリスマスなムード一色ですが、皆さまお忘れになってはいないでしょうか。 大掃除という名の一大行事を！！終えない限りはクリスマスを迎えられませんよね（鬱 今週こそはきっと・・・ほほほ。。 自分を追い込んでみたところで、本題に入りたいと思います！ こちらは、ソニックムーブ Advent Calendar 2014 12日目の記事になります！ 目次 なぜ gulp なのか 目標 ディレクトリ構成 基本設定 タスク設定 トラブルシューティング 参考URL なぜ gulp なのか 当記事は grunt から gulp に乗り換えを考えているユーザーを対象としているので、Node.js のインストール方法の説明を省かせていただきます・・・
素人のための Grunt プラグイン利用のすすめ - Qiita
はじめに Qiita 初投稿ながら Advent Calendar 書かせて頂きます。 書きたかった他の方々すみません。 この記事は、自分も含めて、 「Grunt とか gulp.js とか、名前は聞くけどそういうのよく分からないよ」 「使ってみたけど、なんか上手く行かないよ」 という人たち向けの記事です。 巷では「gulp.js 使えよ」という風潮をひしひしと感じますが、 素人には Grunt の方が取っ付き易いなあ、と思うところがあったので Grunt の記事にします。 お世話になってきた Grunt への追悼もちょっぴり込めて… Grunt を使ってみよう 既に秀逸な記事が沢山あるのでさらっと。 ここでは grunt-init を利用してひな形を作りましょう。
Front-end with Node.js - Node学園祭 2014
Node学園祭・初参加 初参加だったんですが、ビギナー＆フロントエンド向けのNode.jsツール系セッションを担当させていただきました。なんかめっちゃ緊張した･･･。 参考リンク集 1. Package manager npm Bower npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ The npm Blog — npm and front-end packaging Npm Tips · fiveisprime npmのあまり知られてない機能 10選 - from scratch npm-shrinkwrap Bower Resolutions - Jake Trent 2. Task runner Grunt: The JavaScript Task Runner gulp.js - the streaming build system Node.js の Stream
sinatra ですぐにアプリケーションの実装に入れるようにするための準備 - Studio3104::BLOG.new
背景 自分が仕事で書く WEB アプリケーションは多くの場合が小粒で、何か書く場合には sinatra を使っています。 さらにテンプレートエンジンは slim で、ビューが必要な場合は twitter bootstrap を使って書きます。 で、新規で何か書き始める時に、それっぽいディレクトリ構成を作って、twitter bootstrap とか jquery とかをダウンロードして解凍してそれっぽいところに設置してー(もしくは既存プロジェクトをディレクトリごとコピーしてきて要らないファイル消してネームスペース変更してー)、とかっていうローテクな感じのことを毎回手動で行っていて、すっと実装に入れない！めんどくせー！ってなることが多いので、いったん整備してみました。 studio3104/ore-no-sinatra-skelton · GitHub 構成 javascript/css ラ
bowerと仲良くなる - Qiita
<script src="/bower_components/angular/angular.js"></script> いちいちこういうコード書いてる人、いませんよね。bowerを使えるなら自動で挿入(インジェクション)すべきです。 main-bower-filesを活用すべし しばらくgruntでgrunt-wiredepを使っていたんですが、useminに脳を焼かれたためGrunt自体やめました。Gulpでもwiredepのストリームを使うこともできますが、concatが辛めです。main-bower-filesを使いましょう。 実践 実際に動かしている構成に近づけようとしたら余計なものが結構入ってきてしまった感があるが、気にしない。 ちなみに本サンプルは https://github.com/endaaman/main-bower-files-is-nice に公開してあります。
2014-09-30のJS: Gruntの現在と未来、React.js、The Mobile Web Handbook
JSer.info #194 - The State of Gruntというスライドでは、Gruntの現状と将来について書かれています。 GulpやBroccoliのpluginをoptional adapterを使ったサポート、GulpのようなStreamやPromiseベースのタスクのサポート等を予定しているそうです。 また、最後のページではGruntとGulpとBroccoliのそれぞれの目的の違いについて書かれています。 Get Started React.js // Speaker DeckというスライドではReactの基本的な使い方からComponent、Prop、State等の構成要素などについて詳しく書かれています。 最近、色々なところでSEO等の視点などからもみかけるようになったReactのServer-Side Renderingについても触れられています。 React
Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、フロントエンドエンジニアのおじいちゃんと言います。おじいちゃんはあだ名で、本名は後藤です。よろしくお願いします。 本日は、開発を効率化してくれる自動化ツールのGruntの導入から使用方法、おすすめプラグインまでを紹介したいと思います。 Gruntとは http://gruntjs.com/ GruntはNode.jsを使ったJavaScript製のタスクランナーです。 決まった動作をおこなったときに、あらかじめ決めておいたタスクを実行してくれます。 黒い画面を使うから面倒くさそう…と思っている方もいるかもしれませんが、コマンドはコピペでいけるのでご安心を！ それでは、いってみましょう。 環境構築 Gruntを利用するためには、まずNode.jsが必要です。 さっそくインストールしてみましょう。インストーラーがあるので簡単です。 Node.js 下記URLよりダウンロードしてイ
Gulp入門 - コーディングを10倍速くする
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
Gruntを使用したWordPressプラグインの開発 | Firegoby
先日発売されたプラグイン本なんですが、実は執筆の時点で600ページ以上ありまして、編集の段階でボツになった原稿が大量にあります。笑 今回はボツになった原稿の中から、Gruntを使ったプラグイン開発というネタの原稿を放出します。 まあ最近はgulpのほうが…って声もあるでしょうが、そのへんはお好みで。 サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル Gruntとは？ スマートフォンなどの普及により私たちが制作するウェブサイトのフロントエンド部分は、非常に速いスピードで高度化しています。 それにともなってTwitter BootstrapやFoundation、Sassなどのフレームワークが登場し、CSSやJavaScriptの開発作業そのものも複雑で面倒なものとなってきました。 Gruntとは、これらの設定作業やビルド作業、テストなどを自動化するためのツールで、W
フロント作業の効率化
下記勉強会の発表資料です。 --------------------------------------------------------- JSLOVE 〜JavaScriptを愛する人の話を聞いてみよう〜 http://devlove.doorkeeper.jp/events/5811 ---------------------------------------------------------
GruntでSassのビルドとjsファイルの結合・圧縮を自動化 - bata's log
JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/javascript/firstgrunt.html Macの場合 http://catcher-in-the-tech.net/461/ Gruntfile.js を記述 module.exports = function(grunt) { grunt.initConfig({ //Sassをビルド sass: { options: { style: 'compressed',//CSSのスタイル sourcemap: true,//ソースマップを書き出す noCache: true//キャッシュファイルを生成
Gruntfile.js が長すぎてつらい人は gulp を使ってみよう - Qiita
Gruntfile.js は常々長すぎると思っていました。複数ファイルに分割しようが長いものは長いです。 最近、後発の gulp というものを見つけて使ってみていますが、いい感じです。 設定ファイルが短く書ける上に、速いです。 先日 Grunt 入門の記事「Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩」を読んで、例の Gruntfile.js と同等の内容を gulp で書いたらどうなるかなと思って書いてみました。 サンプルファイル含めたプロジェクト全体 gulpfile.js だけ 67 行から 29 行に。約半減です。また、短くなっただけではなく、処理の流れがわかりやすくなっていると思います。 var gulp = require('gulp'); var concat = require('gulp-concat'); var prefix
更新ボタンも押すのが面倒な人のためのJavaScript 開発環境 - Lush Life
最近、気にっている JavaScript の開発環境を紹介したいと思います。 Yeomen をベースラインとしたAnguler JSとNode JSの環境です。Yeomenが生成するGruntベースの環境は、ソースコードがWatchされており、ソースを変更すると自動的にブラウザが更新され、ソースの変更がブラウザに反映されます。それにNodeJSも組み込み、 サーバサイドの開発もできるようになったので、重宝しています。 1. Yeomenの Angular JS の環境を作る Yeomen をインストールして、 yo angular:appを実行すると、 ├── Gruntfile.js ├── app ├── bower.json ├── karma-e2e.conf.js ├── karma.conf.js ├── node_modules ├── package.json └── te
「gulpってどうなの？」に対する返答
Gruntを使ってる人に「gulpってどうなの？」と聞かれる機会が最近何回かあったので、いまさらながら自分の所感を交えて答えてみる。 まず、自分がこれからプロジェクトを始めるとしたらgulpを使うでしょう。理由は質問に答えながら書いていきます。 Grunt使い続けちゃだめなの？ そうですね。あなたがGruntに十分慣れていて、タスクのテンプレートがあってすぐに開発に入れるならGruntを使い続けてもいいと思います。ただ、今はGruntとgulp両方とも使われていますが、どっちが覇権を握るかわかりません。Gruntしか知らないままgulpの時代が来たときにノウハウの差が多少出るかもしれません。 もしあなたがGruntを片手間程度に使っていて、設定してるタスクが「ローカルサーバとライブリロード、あとminify系くらい」な人ならgulpを触ってみる価値はあると思います。同じタスクをgulpでや
SassとGruntとVagurntで考えるWordPressテーマ設計術 | Lovelog+*Lovelog+*
WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。 Lovelog+*のテーマをリニューアルしました。foundation5_s（Underscores）がベースになっています。 このリニューアルにあたって、 gruntとVagruntを導入し、開発環境を一新しました。WordPress環境開発は、Varying Vagrant Vagrantsを使用しています。子育てをしながらだと、 1日で作業する時間は限られてくるので、中々進みませんが…。閃きだけは降り注ぐので、 それを後は空いた時間に実装するだけ(^^ゞ今回もまたWordPressのテーマ設計を、 sassとgruntとVagruntを使って、 どこまで効率的に、表示速度も含めて開発できるかを念頭に設計しています。ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のフロントエンドツールの紹介
