@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた | DevelopersIO
@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた はじめに こんにちは植木和樹＠上越妙高オフィスです。先日 Naoki YAMADA (@wakamsha) さんがSpeakerdeckで公開したAltJS/AltCSSに関するスライドを大変興味深く読ませてもらいました。 このスライドは社内の新卒社員向け研修の内容とのことで、最後に「課題」があったため、今回私なりに回答してみました。 お題 JavaScript, CSS いずれも何かしらのプリプロセッサを使用すること（※HTMLは任意） ローカルサーバーの起動 ファイルを変更したら自動的にビルド処理が実行 コンテンツは「Hello, world」でOK 自信がある人は 何かしらのフレームワークも導入してみよう 回答 今回はフレームワークの導入は敷居が高かったので、最初の4つの
gulpとbabelとwebpackというフロント開発３銃士 - Qiita
フロント３銃士 gulp webpack babel ※今回は概要紹介なので、導入方法や使い方で一部端折っている部分があります。その辺は別の記事でまとめようかなと思います。(気が向いたら) gulp gulpはJavascript製のタスクランナーです。 例えば、 cssファイルが増えて大変だから一つにまとめたい！ とか、 lessをcssにコンパイルしたい！ とかをJavascriptの記述でタスク化することができます。 ... gulp.task('less2css', (callback) => {//lessをcssにコンパイルするタスク return gulp.src([//対象を指定 "./src/main/resources/static/less/**/*.less" ]) .pipe( plumber() )//エラーが起きた際によきに計らってくれるおまじない★ .pip
gulpでtypescriptのコンパイル - エンターテイメント！！
きっかけ 職場には既にgulpがあったけど、一から入れたことがないので、勉強がてら試しにやってみた。 gulpとは？ CIのためのビルドツール。 処理は、タスク単位で書くことができる。 特徴は、ストリームを使ったメソッドチェーン的な記述で処理を書けるところ。 作ったタスクをつなげて、ビルドさせる。 似たツールにGruntというものがあるらしいが、利用したことがないので、ここでは言及しない。 また、gulpの基本は抑えているものとし、詳細な説明は省く。 気が向いたらまとめ記事を投稿予定。。。 準備 実施環境 ProductName: Mac OS X ProductVersion: 10.12.3 BuildVersion: 16D32 npm homebrewでインストール コマンドは以下。nodeと一緒にインストールすれば、npmもインストールされるはず。 brew install no
TypeScriptのビルドからテスト・カバレッジレポート, そしてgulpでconnect+watch - Qiita
概要 はじめに jQueryを使ってセコセコとクライアントサイドのJavaScriptを書いていた時代からすごい変化しています。浦島太郎状態から脱却するために、最近の動向に沿った開発ができるように環境構築してみました。 TypeScriptでコードを書いてユニットテスト・カバレッジレポート作成を行いつつ開発を進められるようにします。 まずは、各ステップの操作を手動で確認したあと、gulpで自動的に行えるようにします。 目標 コード本体はTypeScriptで書く,ユニットテストも書く TypeScriptをECMAScript5のCommonJSにコンパイル 生成されたJavaScriptをユニットテストする、カバレッジも出す。 webpackでまとめる。 ファイルを更新したら自動ビルドする。 以上の操作をgulpで一括して行いたいと思います。 より多くのブラウザを対象にするためにECMA
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
gulp＋Browserifyで、JavaScriptビルド／minify／watchify／livereload - CLOVER🍀
以前、gulp＋webpackで似たようなことをやったのですが、Broserifyを使った自分なりのgulpfile.jsを作っておこうかなと思いまして。 やりたいこと。 BrowserifyでJavaScriptを結合 minifyする sourcemapを作成する wachifyを使って差分コンパイル ということをやるように、npm moduleをインストールしてgulpfile.jsを書きました。 以下、発行したコマンド。 $ npm init $ npm install -g gulp $ npm install --save-dev gulp browserify gulp-load-plugins gulp-uglify gulp-sourcemaps gulp-plumber gulp-util vinyl-source-stream vinyl-buffer gulp-we
Electron + react.js + gulp でメニューバーアプリを作ってみた - fukajun - 僕はvimで行きます -
やってみたこと electronでとあるチャットの内容をみるだけのアプリを作ってみた。 macのメニューバーにアイコンが表示されて、クリックするとチャットの内容を 一覧で表示することができる。また、新着メッセージがあったときに デスクトップに通知を表示、メニューバーアイコンを未読有りののアイコンに 変更するなど基本的な動作を実装してみた。 実装において、react.js と gulp を利用して開発を行っている。 start mkdir start cd !$ npm init -y npm install --save electron-packager npm install --save electron-prebuilt npm install --save menubar index.js作る var menubar = require('menubar') var mb = m
gulp-webserverで開発用Webサーバーを立ち上げる - FLINTERS Engineer's Blog
こんばんは、ゆあさです。 今日はgulp-webserverを使った開発用のWebサーバー立ち上げの方法と、Web APIサーバーへのプロキシを実現する方法を紹介したいと思います。 gulp-webserverとは gulp-webserver gulp-webserverとは簡単に開発用のWebサーバーを立ち上げることができるgulp用のプラグインです。 ファイルの変更があった際に自動でブラウザを再読み込みしてくれるライブリロード機能や、別で起動しているhttpサーバーへのプロキシ機能などをデフォルトで備えています。 gulp-webserverのインストール まずは下記コマンドgulp-webserverをインストールします(gulpはすでにインストール済みの前提) npm install --save-dev gulp-webserver gulpタスクの追加 gulpfile.js
gulp v4.0を眺めてみた
gulpfileをES6に置き換える必要があり、何気にgulpの情報追っていると、 そろそろv4.0がリリースされそうなのでざっくりと眺めてみた。 gulpfileをES6で書くまず、本来の目的だったこの件、v3.9ですでに対応されていた。 以下の条件であれば利用可能のようだった。 gulp v3.9以上 gulpfile.jsをgulpfile.babel.jsとする babel-core をインストールすること 内部的にはbabelで変換しているようだ。 続いて、v4.0のCAHNGELOGも眺めてみた。 gulp4.0をインストール cliの変更点--tasks-json と --verify オプションが追加されてる。 –task-json はタスクをjson形式で出力する。 –verify はpluginsがpackage.jsonを参照しているかチェックする。 APIの変更点大
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
僕なりのフロントエンド開発環境 - Qiita
ちょっと古くなってきたので、タスクをアップデートした http://qiita.com/koh110/items/83cb29f8ecc2738ea8bb 最近フロントエンドよりの開発をする事が多く、そろそろ面倒くさい部分を自動化せねばなぁと思ってgulpのタスクなどを色々まとめて、僕の考えた最強のフロントエンド開発環境を整えた。 随時アップデートはしていくつもりだけど、しばらくはこれを使ってみようと思う。 ひと通りは以下のリポジトリにまとめた。 https://github.com/koh110/minjsapp 簡単に他のリポジトリで利用できるようにファイルだけcopyするシェルスクリプト付き $ git clone https://github.com/koh110/minjsapp.git $ cd minjsapp $ ./copy.sh /path/to/yourproject
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
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.
イマドキのJSテスト - テスト環境をモダンフロントエンドツール群で整備する編 〜 JSおくのほそ道 #032 - Qiita
こんにちは、ほそ道です。 今回はビルドツール・モジュールローダ・altJS(JSコンパイラ)を組み合わせてさらにテストコードのおくのほそ道に入り込んでいきます。 今回Gulp + Webpack + Karma + Jasmine + ES6を使用しますが、 GruntだったりBrowserifyだったりMochaだったりCoffeescriptだったりに置き換えても基本的な考え方は近しい感じになるかと思います。 あとはここにSPAフレームワークとかを組み合わせればいよいよモダンなテストコードになっていきますね。 目次はこちら 今回解決すること・設計方針 Webpackとテストコードを組み合わせる。なんかバンドルしたりごにょごにょやってるどこにテストを挟むのか？を解決する。 ソースコードもテストコードもES6で書く。babelないしはaltJSのコンパイルごにょごにょやってるどこにテストを
gulpの使い方 Win/Mac対応
作成：2015/06/22 更新：2018/05/27 Mac > Web制作 Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Node.jsとは Node.jsをインストールする Mac版バージョン管理ツール：nodebrew Windows版バージョン管理ツール：nodist パッケージマネージャー npmの使い方 gulp（ガルプ）のインストールと使い方 Node.jsとは ご存知な
AWS LambdaファンクションをGulpでデプロイ | DevelopersIO
東京リージョンでのリリースが待ち遠しいAWS Lambda。既にバリバリに活用されている方もいれば、夏に向けて絶賛勉強中の方もいらっしゃるかと思います。 そんな皆様に向けて、今回はAWS Lambdaそのものの機能ではなく、AWS Lambdaファンクションの開発ワークフローに関するお話をお届けします。 今回のスコープ(=AWS Lambdaファンクションのデプロイ) 開発ワークフローとか大げさなことを言いましたが、今回のスコープはAWS Lambdaファンクションのデプロイの部分です。 AWS Lambdaファンクションのデプロイは、AWS Lambdaファンクション本体(index.jsなど)と、AWS Lambdaファンクションで利用するnode.jsパッケージ等のファイル群一式をZIP化してアップロード、 というやり方が基本です。(ランタイムがnode.jsの場合はManageme
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpack2 + Gulp で複数の書き出し先、複数の設定のコンパイルをする - Qiita
[Elixir] Phoenix+MySQL+gulpでアプリケーションを作る - Qiita![[Elixir] Phoenix+MySQL+gulpでアプリケーションを作る - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b18d433edb65bea7b3a63c136fcaf4fe71a39950/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCRWxpeGlyJTVEJTIwUGhvZW5peCUyQk15U1FMJTJCZ3VscCVFMyU4MSVBNyVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiVCMSVFMyU4MyVCQyVFMyU4MiVCNyVFMyU4MyVBNyVFMyU4MyVCMyVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YjZmZjJhZDc5ODBhYWFkOGM0YWVkYTFkY2U1MWQ1N2Y%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBGTDRUTGlOMyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTc0NDUwZDU5YTQ4YzcyZDdjNTEzMjlhMWRlMmJjOWI%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D00ae9a5181f2263a690c237b353575bc)
