-
Node (最新版推奨)
-
Gulp
npm install -g gulp
├ root (公開用)
└ src (作業用)
├ css
├ js
├ font
└ img
src(作業用)フォルダで作業した内容をroot(公開用)にはきだす。
config.js
の内容を書き換えてください。
jQueryなど必要なjsがあればpackage.jsonに指定してください。
package.json
"dependencies": {
"jquery": ""
}
それぞれプロジェクトを始める際にバージョン指定をしてください。 空の状態だと最新がダウンロードされますが、 時間がたち最新バージョンが変わった場合には正常に動作しなくなってしまう可能性があるためです。
下記を使ってnode_modulesをインストールするとpackage.jsonに現在の最新のバージョンが自動で指定できます。
-
package.jsonのnode_modulesをinstall
sudo npm install
npm run watch
npm run sprites
src/img/sprite/
内にsprite-**.png
というファイルがフォルダの数分生成されます。
src/css
内にsrc/img/sprite/
以下のフォルダの数分のcssの設定ファイルが生成されます。
sprite-num.png
_num.css
npm run svgfonts
src/font/
内にfontがフォルダの数分生成されます。
src/css
内にsrc/font/
以下のフォルダの数分のcssの設定ファイルが生成されます。
fontの内容を確認したい場合はsrc/css/font/sns_fontlist.html
を見るとfont一覧を確認できます。
@import "font/_name";
.test {
content: var(name-test); //変数で文字コードを取ってくることができます。
//var(フォルダ名-ファイル名)
}
useminを使っています。
<!-- build:js js/common.js -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
<!-- endbuild -->
root/js/common.js
としてjquery.js
prettify.js
をまとめたファイルが生成されます。
htmlはroot/
に下記ように変換され出力されます。
<script src="js/common.js"></script>
cssはpostcssを使えるようにしています。
- precss
- postcss-assets
webpackとbabelを使えるようにしています。
localhost:8888 で確認できます。
-
CSS,JSの圧縮
npm run build