- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
1 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:10:01.75 ID:TiXxI8xG - 教えるよ〜
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
4 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:13:29.10 ID:TiXxI8xG - LAMP環境は特別必要ではないなー
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
5 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:14:12.06 ID:TiXxI8xG - >>3
を使って制作していくよ
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
6 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:16:10.30 ID:TiXxI8xG - 昨今Web制作もタスクランナーを使った制作が流行っているよ。
Node.jsをインストールしようね。
https://nodejs.org/ja/
LTSをインストールするんだよ。
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
7 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:17:21.76 ID:TiXxI8xG - インストール後、再起動を行った後にコマンドプロンプト（Terminal）を開き
node -v
以上のコマンドを打ち、バージョン情報が出ればインストール成功だ。
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
8 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:20:11.39 ID:TiXxI8xG - 確認ができたら次はnpmのバージョン情報を出そう。
npm -v
このコマンドを打ってバージョンを確認のち、念のためnpmをバージョンアップするんだ。
npm install -g npm
このコマンドを打ってアップデートだ
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
10 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:23:21.14 ID:TiXxI8xG - さぁ、次はGulpのインストールだ。
Gulpっていうタスクランナーだ。めっちゃはえーつえーやつだ
コマンドプロンプトにて
npm install --global gulp-cli
このコマンドを打ちエンター！
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
11 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:24:38.27 ID:TiXxI8xG - できたら、Windowsのデスクトップに作業フォルダを作ろう。
websiteみたいな適当な名前をつけれ。
でもってコマンドプロンプトでそのフォルダまで移動して、
npm init -y
このコマンドを打つべし
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
14 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:26:46.48 ID:TiXxI8xG - npm init -y
このコマンドが打ったらPackage.jsonというファイルができるな？それに触れるな。怪我するぜ（嘘）
次はその中でGulpを使えるように
npm initした場所で
npm install --save-dev gulp
このコマンドを打つべし。
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
15 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:28:34.76 ID:TiXxI8xG - gulpのインストールが終わったら、次に
npm i -D gulp-sass
このコマンドをうつのだ。
iはinstallの略
-Dは--save-devの略だ
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
16 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:29:52.13 ID:TiXxI8xG - あとついでに
npm i -D gulp-autoprefixer
npm i -D gulp-plumber
このコマンドも打つ。
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
17 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:31:42.47 ID:TiXxI8xG - あと、大事なことを忘れていた。
gulpfile.js
このファイルを作りなさい。package.jsonと同じ場所にだ
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
18 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:33:15.66 ID:TiXxI8xG - .
├── app
│ └── src
│ ├── images
│ ├── index.html
│ ├── js
│ └── sass
│ └── style.scss
├── gulpfile.js
└── package.json
あと、こんな感じのディレクトリ構造にしておいてくれ。頼む
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
19 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:34:03.94 ID:TiXxI8xG - あとgulpfile.jsに実際の処理を書いていくんだがめんどくさくなってきた。すまん。
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
20 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:35:50.83 ID:TiXxI8xG - >>13
タスクランナーで自動化して楽するため必要
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
21 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 01:40:25.78 ID:TiXxI8xG - こう考えたら最近の制作ってめんどくせぇな。もうやめた
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
23 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:04:12.57 ID:TiXxI8xG - >>22
gulpのインストールは終わったかい
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
25 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:07:36.01 ID:TiXxI8xG - 反応内からやめたのに、うれしいぜおまいら
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
29 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:12:06.01 ID:TiXxI8xG - >>27
Webサイトとホームページは同義だよ。
gulpfile.js作るか
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
31 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:15:08.53 ID:TiXxI8xG - >>3
で
HTML,CSS,JSを使用すると言ったな。あれは嘘だ。
今の時代は
プリプロセッサ言語で書くのがモダン！ナウい！楽で効率的だ。
だからそれらを使ってやっていくよ。といってもHTMLはさすがに生のがいい初めは
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
33 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:16:10.75 ID:TiXxI8xG - >>32
補完サンクスコ
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
35 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:19:18.30 ID:TiXxI8xG - あと、テキストエディタにもこだわれ。
Visual studio code、Atomというエディターが高機能かつ無料おすすめだ。
>>34
一回だけめんどくさいだけであとは別にめんどくさくない。
PHPとかでインクルードできるけどサーバーが必要になるから柔軟じゃない。
だからNode.jsのjadeやEJSでHTMLインクルードさせたりする
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
39 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:25:07.12 ID:TiXxI8xG - >>38
これそんなに難しいかな…すまそ
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
40 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:27:29.74 ID:TiXxI8xG - とりあえずgulpfile.jsの一部分かけたのでさらしておく
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
gulp.task('sass', function() {
return gulp.src('./app/src/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(gulp.dest('app/dist/css'));
});
これを記述して、コマンドプロンプトにて gulp sassって入れるとsassファイルがコンパイルされてCSSになる
|
- Webサイトの作り方知りたい人いる？ [無断転載禁止]©2ch.net
42 ：名も無き被検体774号+＠無断転載は禁止[]：2016/11/28(月) 02:29:04.10 ID:TiXxI8xG - 俺全然人の視点に立てれてなかったのか。やっぱやめとくわ。
すまそ
|