Webpackで Browsersync + Sassコンパイルを試す - aircolor memolog
GruntやGulpなどのタスクランナーツールでは一般的ですが、WebpackだけでBrowsersyncをベースにSassのコンパイルを試してみました。 そもそもWebpackに触れるについては、当初はやや億劫でした（汗 ローダーという仕組みについての理解不足、日本語ドキュメントの少なさ、そしてなんといっても大艦巨砲主義と揶揄されるようなオプションの多さが理由です。とにかく調べるのが大変そうなイメージでした。また本業がWebサイト制作メインなので、Gulpで十分なのでは？という気もしてます。 しかし前々からES6の導入とvue.jsを使う上でベストな環境を構築したかったのと、Rebuild.fmと例の記事に触発されて腰を上げて調べてみようと思いました。 準備 Webpackへの理解が圧倒的に足らないので自分なりに調査をするところから。大雑把なまとめとして、 Webpackはビルドツールで
いまどきのWebサイト制作におけるフロントエンド開発環境を構築してみた | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、2017年春アニメは良作揃いで今からワクワクが止まらないデザイナーの奥田です。 さて、ワクワクといえばIE9、10のサポート終了でかなりできる幅が広がりワクワクしますね。 個人的にはjQueryを切り捨て（jQuery今までありがとう！）できるだけコードはネイティブで書きつつ、モダンな環境で構築するという新たなステージに挑戦しました。 今回は僕が構築したWebサイト制作におけるフロントエンド開発環境をご紹介いたします。 「もっといい方法があるよ！」という方はぜひご一報ください。 Table of contents使用するビルドツール必要なパッケージをインストールするgulpfile.jsを作成するwebpack.confg.jsを作成する最後に使用するビルドツール今まではgulpでBrowserifyを使用していましたが今流行のWebpackに移行しました。 本来Webpack
npm + gulp + webpack でつくるES6/sass開発環境
最近はJavaScriptをES6で書いたり、cssをsassで書いたりするのが当たり前になってきました。そうなると必然的に必要になるのがビルド。ビルドの仕組みも充実してきていて、単にトランスパイルするだけでなく、構文チェックしたり圧縮したり、CSSスプライトをつくるようなことまでできたりします。 で、このビルド環境、新規Project立ち上げる度に用意するのが面倒くさいので、自分用の雛形をつくりました。よかったら参考にしてみてください。 ビルドの中身 ES6 → ブラウザで動かせるJavaScriptにする scssをcssにする jsとcssはそれぞれ結合して圧縮する(.min.js/.min.cssをつくる) 変更を検知して自動ビルドする 雛形なので特別なことはしません。新しく何かつくりたいと思ったときにすぐに作れるようなビルド環境を用意するだけです。デバッグ用にトランスパイルしただ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
