タグ

2019年12月9日のブックマーク (2件)

  • gulp+webpack+jQuery+pug+sassで開発環境構築 | BLOG | フロントエンド・コーディングの受託/請負制作専門フリーランス JWS

    長いこといつか更新しないとと思っていた開発環境を時間があったので作り直しました! あれもこれもと機能充実させていったら、トータル 3 日ぐらい使ったかもしれません。。 LP ~数ページレベルの案件だと使い勝手が良いかなと思います。 大型案件向きではありません。 だいぶオレオレ開発環境なのですが、GitHubに置いておきますので、使いたい方は clone して使ってみてください。 開発環境を変えた理由 開発環境を変えた理由はいくつかあります。 gulp・node・webpack を最新にしたかった。 gulp の watch 機能が微妙で、ファイル追加したときいちいち再起動が必要だった。 js を webpackbundle して 1 ファイルにまとめたかった。 js を module 化して機能ごとに分離したかった。 meta 周りを一括で変更できるようにしたかった。 UnCSS

    gulp+webpack+jQuery+pug+sassで開発環境構築 | BLOG | フロントエンド・コーディングの受託/請負制作専門フリーランス JWS
  • 開発しやすい環境の作り方~Web系~ - Qiita

    はじめに 何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。 目的 開発を円滑するために行ったら良いと思われることについての紹介 概要 タスクランナーのGulpを用いて開発の効率化を図る。 内容は、SassやPugで書いた内容を変換し、ファイルの内容が変更された場合は自動的にブラウザのリロードを行う流れを作成する。 Windows 8.1 npm 2.15.1 node 4.4.3 gulp 3.9.1 環境構築 フォルダ構成 まず初めに、フォルダ構成を作成します。今回の場合私はポートフォリオサイト作ろうと思っていたので以下のようにしました。 今回はこのフォルダ構成で説明していきます。 root/ ├ js/ | └ index.js ├ css/ | └ style.css ├ img/ | └ hoge.png ├ sass/ | └ style.s

    開発しやすい環境の作り方~Web系~ - Qiita