デザイナーにもオススメ！シンプルですぐできるSass（SCSS）開発環境構築 | Black Everyday Company
ファミコン風CSSフレームワーク（NES.css）を開発するために、Sassの開発環境を整えたので共有したい。 ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。 しかし、Sassを使う上で避けては通れないものがある。 SassからCSSに変換する「コンパイル」だ。 フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツール
npm-scriptsで静的ページを量産するための最強タスクランナー - Qiita
これだけで全部自動で走ります！ ※npm-run-allモジュールはwatchなどがうまく動かないらしいので、使っていません。ただ並列に繋げたのをallにしているだけです。 package.json { "name": "nagaokatakeshi", "version": "1.0.0", "description": "npm-scripts", "main": "index.js", "scripts": { "all": "npm run watch-css & npm run watch-ejs & npm run watch-autoprefixer & npm run start", "ejs": "ejs-cli --base-dir src/ejs/ '/**/**.ejs' --out ./public/", "watch-ejs": "nodemon -e ejs
Sass(scss) を自動ビルドしつつブラウザも自動リロードして開発速度を上げる - Qiita
手早く html の LP とかカンプを作りたい時のための手順。Sass を使いつつ、ファイル変更でブラウザも自動リロードしたかった。 TL;DR https://github.com/TsuyoshiNumano/simple-sass-build-and-reload をクローンして npm i && npm run dev それも面倒な人は以下を自身の package.json に書き加える(変更検知のフォルダは任意の場所を！) npm run dev { "scripts": { "build-css": "node-sass --include-path scss scss/style.scss css/style.css", "watch-css": "nodemon -e scss -x \"npm run build-css\"", "sync": "browser-syn
Grunt + Sass + Compassでつくるナウいフロントエンド開発環境
Grunt、Vagrantなどの制作作業を効率化するツールがいろいろとでてきていますね。存在はしっていたものの、今の環境で著しく不便を感じているわけでは無いし、面倒だし…と手を出さずにいたのですが、OS Xでの環境構築について手順をまとめてくださっている記事があったので、通してやってみました。 上記の記事を見て一通り設定はできたのですが、GruntやCompassの設定に戸惑ってしまいました。設定作業中もいくつかエラーが出たりしたので、そのあたりも考慮して僕の行った環境構築の手順についてまとめてみました。僕のようにまだこのあたりのツールに興味はあるけど手を出していないという方は参考にしてみてください。 もろもろをインストールする Xcode まず、AppStoreからXcodeをインストールします。コマンドラインツールも必要なので、下記のコマンドでインストールします。 xcode-sele
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
