Gulp4設定まとめ(Pug/Sass) - Qiita
1. はじめに Gulp+Pug+SassでWebサイトの開発環境を作りました。 何度か作っているのですが、毎回忘れてしまうのでまとめです。 ※ gulp自体のインストール(グローバルインストールとローカルインストール)はされている前提です。 ※ npmを使っています。 2. ディレクトリ構造 dest/ ├css/ ├images/ └javascripts/ index.html src/ ├images/ ├javascripts/ ├pages/ ├pug/ └sass/ gulpfile.js package.json
GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする - Qiita
var gulp = require('gulp'); var notify = require("gulp-notify"); var plumber = require("gulp-plumber"); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var pug = require('gulp-pug'); var browserSync = require("browser-sync"); //setting : paths var paths = { 'scss': './src/sass/', 'css': './dist/css/', 'pug': './src/pug/', 'html': './dist/', 'js': './dist/js/' } //
gulp＋webpack＋jQuery＋pug＋sassで開発環境構築 | BLOG | フロントエンド・コーディングの受託/請負制作専門フリーランス JWS
長いこといつか更新しないとと思っていた開発環境を時間があったので作り直しました！ あれもこれもと機能充実させていったら、トータル 3 日ぐらい使ったかもしれません。。 LP ～数ページレベルの案件だと使い勝手が良いかなと思います。 大型案件向きではありません。 だいぶオレオレ開発環境なのですが、GitHubに置いておきますので、使いたい方は clone して使ってみてください。 開発環境を変えた理由 開発環境を変えた理由はいくつかあります。 gulp・node・webpack を最新にしたかった。 gulp の watch 機能が微妙で、ファイル追加したときいちいち再起動が必要だった。 js を webpack で bundle して 1 ファイルにまとめたかった。 js を module 化して機能ごとに分離したかった。 meta 周りを一括で変更できるようにしたかった。 UnCSS で
開発しやすい環境の作り方~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
Gulpでsassのコンパイルを自動化！快適な作業環境を整えよう！ – ホームページ制作【大阪・加古川】AWESOME | SEO・集客に強い
こんにちは〜。 最近寝不足でニキビが出来てきた金澤です。 awesomeのリーちゃんがくれるみかんが、僕のビタミン源です。 さて、前回はgulpを導入して簡単な命令を実行しよう みたいな事を書きましたけども、 同業の友人に『普通にめっちゃありがたい！』 と言われ、少しでもお役に立てているようで嬉しかったです。 というわけで、今日は前回の最後にお話ししました、 sassのコンパイルを自動化するというお題です。 command + Sでポンっとcssが吐き出されるのは快感ですよ♪ 是非、読んでみてください。 まず準備として作業フォルダ内に ・sassという名前のフォルダ ・その中にstyle.scssファイル を作成しておいて下さい。 Gulpプラグインgulp-sassをインストール まず、前回同様、ターミナルで作業フォルダに移動しましょう。 cd /xxx/xxx/xxxx.xxx で移動
gulp-sassとgulp-postcssで快適コンパイル環境を構築 - Qiita
gulp-sassとgulp-postcssを組み合わせると、快適なCSSのコンパイル環境を実現できます。 Sassのコンパイルはgulp-sassで行い、ポストプリセッサーであるgulp-postcssにその後の処理を連携させるイメージです。 ※このエントリーは当初「gulp-sassとgulp-cssnextで快適コンパイル環境を構築」というタイトルで公開していましたが、gulp-cssnextが非推奨プラグインとなり、PostCSSを使ったやり方が主流になってきたため、gulp-postcssを用いた内容に全面的に修正しました。 基礎知識 gulp-sassについて gulpでSassのコンパイルを行うnpmパッケージです。 libsassを使っているため、gulp-ruby-sassやgulp-compassと比べて処理が高速で、 Rubyに依存しないため環境の構築・共有がしやすい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gulp – The streaming build system