gulp

1/25ページ

【初心者向け】Gulp + Webpack + TypeScriptの設定

環境 ・Mac ターミナル(WindowsでもCygwinなどでOK) ・SublimeText(こちらもjsonファイルを編集できるソフトがあればOK) 目次 Node.jsのインストール package.jsonの作成 各種モジュールのインストール tsconfig.jsonの作成 TSファイルの作成 webpack.config.jsの編集 gulpfile.jsを作成 gulpの実行 基本 […]

今更だけど gulp の Boilerplate 作った

実はだいぶ前に作ったあったものの、いろんなことにかまけてるうちにまとめる気力が減って途中で止まっていましたが、ちょうどまとまった時間ができたので乗り掛かった舟、勢いでまとめて公開しておきます。 https://github.com/okamoai/gulp-boilerplate フロントエンド界隈だと gulp 自体が若干レガシー化して来た感あるんですが、まだまだ案件でも使えると思うのでもし良か […]

dockerでblueprintのコンテナを試す

概要 APIインターフェース仕様書を書くツールで便利なものがないか調べてみた。 ちょっと古いようだが、とりあえずblueprintを試してみる。 ファイル構成 下記のファイル構成で構築してみました。 ファイル一覧 ├ docs │ └ example.md ├ public │ └ .gitkeep ├ Dockerfile ├ docker-compose.yml ├ gulpfile.js └ […]

デザイナー, フロントエンドエンジニアとの共同作業の悩みをLaravel Mixで解決する

この記事は Laravel Advent Calender 2017 8日目の記事です🎁 Webアプリケーションをデザイナーさん/コーダーさんと共同開発することってあると思うんですけどその時にわりとエンジニアは、こういうものだからテンプレートの書き方これなんで覚えてください、開発環境作ったのでこれの上でやってください、という事を言いがち。それでもデザイナーさん達はキャッチアップして開発に参加してく […]

gulp+Handlebars.jsで静的htmlを作る

はじめに。 IDOMアドベントカレンダー(12日目)に投稿しています。 https://qiita.com/advent-calendar/2017/idom-engineer 初心者向け、gulp+Handlebars.jsを使って効率的に静的なhtmlを作る方法を書きます。 序盤の初期設定などは、既にnpmをお使いの皆さんはご存知かと思いますので、 飛ばして読んだ方が良いかなと思います。(また […]

# はじめてのgulpでの環境づくり

はじめに 本当ははじめてじゃないんですが、久しぶりにいじったら忘れていたので勉強しなおしました。 gulpとは gulp.js(公式サイト) node.jsベースのビルドシステムヘルパー。 様々な作業を自動化してくれる(例えばファイルの圧縮とか、Sassのコンパイルとかとか)。 gulpfile.jsというファイルを作って操作して行きます。 この記事の目標 必要な機能をつけた環境を、gulpでスム […]

TypeScript+Gulp+Webpack+jQueryで開発環境を構築

やること TypeScript, Gulp, WebPack, jQueryを組み合わせて、簡単なWebアプリケーションを作ってみます。 TypeScriptは型が書けたりクラスが書けたりする、AltJS(コンパイルしてjsにして使用する物)です。 TypeScriptはコンパイルしてjsにすることで、ブラウザで使用できるようになります。 今回使う他のツールです。 Gulp: タスクランナーです。 […]

Gulp環境構築(Windows用)

最初に 以下の説明は、既に作成済の制作環境を開発チームのはじめて触る方へ、スムーズに伝えることを想定して記載しています。 その為、自分で一から環境を作成したいという方へは向いていない内容となっております。ご了承ください。 また、開発環境がWindowsの為、Macユーザーの方とは一部異なる内容もでてくるかもしれません。そちらもご容赦ください。 Gulpとは 下記引用。 ざっくりGulp.js入門( […]

Gulpでよく使うタスクを分割して、個人的に使いやすくした設定

はじめに 未経験から初めて、フロントエンドで約1年やっただけなので 先輩エンジニア方の焼きまし的な内容になるかもしれないですが、 個人的に便利に作ったのでまとめました。 「ここはダメだよ!」とか「こんな風にするといいよ!」といった アドバイスをいただけると嬉しいです。 各ファイル ディレクトリは以下のように作りました。 . ├── gulp │   ├── config.js │   ├── pl […]

Vue + TypeScript + Babel + Bulma + webpackで作るSPAでレスポンシブなフロント開発2(開発ツール編)

リンク 開発環境構築編 開発ツール編 JavaScript Framework編 CSS Framework編 ビルド編 前回は サンプルソースを落として開発環境を構築、起動までを確認しました。 今回は開発環境で使う開発ツールのパッケージマネージャ(npm) タスクランナー(gulp) モジュール管理(webpack)の説明をします。 ソースはこちら github パッケージマネージャ npm ち […]

1 25