商用利用無料でしかも高品質！ランディングページを作成するためのHTML/CSSのテンプレートのまとめ | コリス

2018/05/23 72 users コリス CSS Sassファイル テンプレート HTML

プロダクトやサービス、スマホアプリ、ショップなど、さまざまなプロジェクトに利用できるランディングページ用のHTML/CSSテンプレートを紹介します。 テンプレートはすべてレスポンシブ対応で、HTML/CSSだけを使用して作成してもよし、カスタマイズ用にGulp/Sassファイルも揃っています。 Papaya Papayaのライセンス レスポンシブ対応のHTML/CSSテンプレート Papayaのラ... 続きを読む

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリス

2018/05/15 107 users コリス デベロッパー npm Webpack CSS

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどの... 続きを読む

帰ってきたGulp 4 - Qiita

2018/02/26 70 users Qiita

2014年あたりから、v4が出なくてやきもきしていましたが、待つこと3年(4年?)、2018年のはじめに v4.0.0 が リリース されました。2018年現在の視点で、v4をチェックしてみたいと思います。 タスクは関数に 以下、 GitHubにある例 からの抜粋です。(多少変形しています) import { src , dest } from 'gulp' import less from 'g... 続きを読む

僕なりのフロントエンド開発環境2017年版 - Qiita

2017/04/07 84 users Qiita Webpack github.com 環境

2016年版を書いてからもう1年もたってさらに古くなってきたので、今の環境に合わせてバージョンアップ 僕なりのフロントエンド開発環境2016年版 - Qiita 僕なりのフロントエンド開発環境2016年版v2 - Qiita https://github.com/koh110/minjsapp 2016年版からのバージョンアップ点 webpackをv2に vendor.jsの切り出しかたをgulp... 続きを読む

Vue.jsの流行とネイティブアプリフレームワークWeex、そして台頭する中国語コミュニティについて - 株式会社クイックのWebサービス開発blog

2017/03/04 54 users YARN Webpack Vue.js Babel 流行

2017 - 01 - 23 Vue.jsの流行とネイティブアプリフレームワークWeex、そして台頭する中国語コミュニティについて こんにちは。五所です。 最近は時代についていこうと、フロントエンドの情報収集をしています。 React, Redux, AngularJS, ES6, Webpack, Gulp, Babel, Yarn... 情報収集すればするほど、頭がいっぱいになるのですが、その... 続きを読む

SlackとVimとメモ管理と私 - wadackel.me

2016/12/08 85 users wadackel vim Slack npm scripts

この記事は Vim (その2) Advent Calendar 2016 の9日目の記事です。 Vimに関する記事 + Advent Calendar初投稿です。よろしくお願いします。 昨年末、仕事が凄く詰まっている時期に突然Vimを使い始めて、丁度1年が経とうとしています。 それまではターミナルを開くのも、Gulpやnpm scriptsを走らせるときくらいで、それ程使用頻度としては高くありませ... 続きを読む

JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita

2016/07/16 433 users Qiita rollup Babel Sass Webpack

近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる... 続きを読む

フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary

2016/06/01 701 users AngularJS React phiary Webpack

10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。 あのライブラリは何故誕生したの?のまとめ - Qiita ここ最近話題になったエントリーですが, どちらも今最もイケてる Riot.js について全く触れられてなくて悲しくなったので書きました. はじめに 「webpack インストールしといてー」, 「gulp 導入して wat... 続きを読む

Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek

2016/04/22 428 users North-Geek Git Sass Emmet 流行

最近フロントエンドの流行がどうのこうのという記事をよく目にしますが、実際に現場で 必要となるスキルと開発環境 を紹介していきます。これくらい知っていると全く問題ない。といったことですね。 主にWebサイトを制作のスキルは、 HTML・CSS、CSS3、Sass、SublimeText、Emmet、gulp、Git についてのスキルがあれば開発がしやすく流行の開発環境ではないかと思います。 さて、そ... 続きを読む

gulpをstreamとか関係なくただのタスクランナーとして使う - getalog

2016/01/28 51 users stream Vinyl タスクランナー タスク イメージ

2016 - 01 - 28 gulpをstreamとか関係なくただのタスクランナーとして使う gulpはstream志向でデザインされていて、streamしか受け入れない・streamじゃないとon the railじゃない、というようなイメージが強いと思う。 ところがどっこい、gulpのタスクが受け入れるのはstreamだけじゃないし、必ずしも gulp-* とか vinyl とかを使わなけれ... 続きを読む

webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る - yutaponのブログ

2015/12/10 79 users yutapon Webpack ビルド 去年 ブログ

2015-12-10 webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る webpack jsdom tdd build この記事は JavaScript Advent Calendar 2015 10日目の記事です。 去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。 やること E... 続きを読む

gulp.js を今一度キチンと！gulp.js 導入基礎 - HAM MEDIA MEMO

2015/11/14 110 users Gulp.js コーディング CSS 一度 HTML

フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gu... 続きを読む

はじめてのVue.js - 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify) - Qiita

2015/11/22 63 users npm Qiita ToDo Rails サーバーサイド

この記事では、Rails や PHP といったサーバーサイドのプログラミングをメインでやっている人向けに Vue.js を用いた簡単な TODO 管理アプリを作るまでを、2回に分けて解説します。 なお、著者の作業環境の都合上、Mac OSX を対象として記事を執筆しています。 1回目では、Vue.js を用いたアプリのモダンな開発環境構築について説明いたします。 Vue.js とは？ Vue.js... 続きを読む

Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ - てっく煮ブログ

2015/11/19 393 users Visual Studio Code 超絶 煮ブログ 開発

期待のオープンソース IDE、Visual Studio Code を試してみたら衝撃を受けた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開... 続きを読む

JavaScriptタスク自動化のもう一つの選択肢、「gulp」の利用法 (1/3)：CodeZine（コードジン）

2015/11/06 59 users CodeZine Grunt ライブラリ 並列実行 HTML

本連載では主にHTML／JavaScript開発作業を効率化するさまざまなツールやライブラリを紹介します。今回取り上げるのはJavaScriptによるタスク実行ツール「gulp」です。すでに本連載では類似ツールのGruntを紹介していますが、gulpはメソッドチェーンによる直感的な記述や並列実行など、Gruntにはない特徴があります。記事ではサンプルを交えてgulpの特徴と利用法を説明します。 は... 続きを読む

gulpとかwatchifyとかbrowserify-shimとかの話

2015/10/12 64 users エントリポイント クライアントサイド require 入り口

今では､JavaScriptを書いててrequire()やimportを使わないことはありえない｡そしてクライアントサイドではそのためにbrowserifyやwebpackを使うことになる｡ browserify-shim やみくもにimportしていると､1つのJavaScriptファイルのサイズが大きくなってしまう｡また､エントリポイント(実際に<script>で読み込まれるであろう入り口とな... 続きを読む

ブラウザー上でスタイルガイドが作れるFrontifyを試してみた | Webクリエイターボックス

2015/09/24 123 users Grunt CSS Webクリエイターボックス ブラウザー上

巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！... 続きを読む

開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました - YATのBLOG

2015/09/10 335 users YAT 記述 学習コスト 導入コスト タスクランナー

WEBデザインをする上で必要な知識・情報・技術等の記述や、参考になるサイトの紹介等を掲載しています。0 タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみた... 続きを読む

Markdown で記述した API ドキュメントからお手軽にドキュメントサーバーとモックサーバーを生成する – Gulp で作る Web フロントエンド開発環境 #7 | NET BIZ DIV. TECH BLOG

2015/08/31 235 users iOS Markdown サーバーサイド SPA 従来

Markdown で記述した API ドキュメントからお手軽にドキュメントサーバーとモックサーバーを生成する – Gulp で作る Web フロントエンド開発環境 #7 SPA 開発によるサーバーサイドとフロントエンドの完全分業化 Single Page Application ( 以下、SPA ) は従来のサーバーサイドレンダリングを基とした Web アプリケーションと異なり、iOS アプリや ... 続きを読む

gulp なしの Web フロントエンド開発 | アカベコマイリ

2015/08/04 289 users package.json npm タスク フロントエンド開発

Web フロントエンド開発において gulp は非常に便利だ。一方、あまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。 というわけで、gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 参考記事 Qiita npm で依存もタスクも一元化する MOL Grunt/Gulpで憔悴したおっさんの話 Keit... 続きを読む

JavaScript - イマドキのJSテスト - テスト環境をモダンフロントエンドツール群で整備する編 〜 JSおくのほそ道 #032 - Qiita

2015/07/08 59 users Qiita JSおく Webpack いまどき Karma

こんにちは、ほそ道です。 今回はビルドツール・モジュールローダ・altJS(JSコンパイラ)を組み合わせてさらにテストコードのおくのほそ道に入り込んでいきます。 今回Gulp + Webpack + Karma + Jasmine + ES6を使用しますが、 GruntだったりBrowserifyだったりMochaだったりCoffeescriptだったりに置き換えても基本的な考え方は近しい感じにな... 続きを読む

Node.jsとgulpをインストールして使うまでの入門記事 | コムテブログ

2015/06/21 96 users ザックリ WIn node.js フロント 手順

Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 もくじ Node.js... 続きを読む

LambdaファンクションをGulpでデプロイ ｜ Developers.IO

2015/06/21 58 users Lambdaファンクション デプロイ スコープ リリース 皆様

東京リージョンでのリリースが待ち遠しいLambda。既にバリバリに活用されている方もいれば、夏に向けて絶賛勉強中の方もいらっしゃるかと思います。 そんな皆様に向けて、今回はLambdaそのものの機能ではなく、Lambdaファンクションの開発ワークフローに関するお話をお届けます。 今回のスコープ(=Lambdaファンクションのデプロイ) 開発ワークフローとか大げさなことを言いましたが、今回のスコープ... 続きを読む

Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境 | モンキーレンチ

2015/05/13 117 users Sass browserify Grunt Compass

Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 Grunt + Sass + Compassでつくるナウいフロントエンド開発環境 browserify とは そんなに詳しく... 続きを読む

makeのくびき - snyk_s log

2015/05/11 100 users Grunt くびき log Make 要約

2015-05-11 makeのくびき javascript 「gulpって何だよ、makeでいいじゃん（要約」論争について、私もちょっと一本講釈をぶってみることにする。あれやこれやといった実利的な話をするつもりはない。そういうものは既に書いた人がいるのでそちらを参照のこと。 Grunt/gulpについて述べると、トレンドの移り変わりが速いというのは半分正しくて半分間違っている。 Gruntの思い... 続きを読む