Webpack + Typescript(Vue.js)の環境、そしてgulpで一括更新

13609 ワード
Sass gulp TypeScript JavaScript webpack JavaScript テキストリンク

なんとこさ、しっくりくる自分なりのフロント開発環境を

gulpとかsassとか前の会社のサブマネとかから、

「ここでgulpってコマンド打てば、ローカルサーバーが勝手に立ち上がって、
そのままブラウザで編集内容が更新するようになっているから、
それでコーディングしてってね＾＾
細かい事とか説明しねーから＾＾」

ってな具合で疑問に思うことすら許されず、なんとなくgulpとかsassとか使っていたが、どうもこうにも便利なだけを感じるだけで、確かにコーディングは早くなったけども、ただ単に早くなっただけでどうもスキルアップに感じないので、あえて自分なりに環境構築してみました。

gulpはなんだかんだでみんな使っている気が、、

依存度が高いって言われてるらしいけど、早いんだもん。
依存してしまおうが抜け出せなかろうが、gulp以上に便利or早いものができて、スタンダードになって行けば中小規模の会社で、トレンドに敏感な企業であればすぐに乗り換えるだろうしね。

webpackというもの・・・

なんかjsとかを編集するときにあるとゴイゴイスーらしい。。色々調べた。。
なんとかビルドできるまでいった。。。なんかね、webデザイナーだと思っていた自分の頃はこんなターミナルやらコマンドプロンプトで作業するなんざ夢にも思わなかった。。。

以下、参考にしたサイトです。

1.最新版TypeScript 2.6+Webpack 3の環境構築まとめ
2.Gulpで始めるwebpack 3入門
3.Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

上記３サイトから学習用の環境を

前提でnode(v8.9.3),npm(v5.6.0)はグローバルインストールしてあり
他、gulp,gulp-sass,typescriptなどは全て、

$npm install -D(--save-dev)　〜

でローカルインストールし、その後、ホームディレクトリにある「.bash_profile」に

export PATH=$HOME/作業ディレクトリ/node_modules/.bin:$PATH

を追加。

具体的な手順としては。
・まず、Typescriptもざっくりどんなものが知りたかったので、参考サイト1.の「webpack + TypeScriptの最小構成」でざっくりと構築。

・次に参考サイト2.で、gulpとwebpackを組み合わせ、gulpコマンドで同時にwebpackのビルドも行う。

・最後に参考サイト3.にある通り、gulp-sassなどでを取り込み、htmlファイル、scss、tsファイルを編集すればそのままブラウザが更新されts(js)の学習用としてもwebページも作れるようにする。ブラウザの自動更新はwebpack-dev-serverではなく、browser-syncを利用

package.json
{
〜略
  "scripts": {
    "build": "webpack"
  },
〜略
  "devDependencies": {
    "awesome-typescript-loader": "^3.4.1",
    "browser-sync": "^2.23.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.6.2",
    "webpack": "^3.10.0",
    "webpack-stream": "^4.0.0"
  }
}
gulpfile.js
const gulp = require("gulp");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const browser = require("browser-sync");
const plumber = require("gulp-plumber");
const webpackStream = require("webpack-stream");
const webpack = require("webpack");

const webpackConfig = require("./webpack.config.js");

gulp.task("webpack", function() {
    return webpackStream(webpackConfig, webpack)
        .pipe(plumber())
        .pipe(gulp.dest("./build/js"))
        .pipe(browser.reload({stream:true}));
});

gulp.task("server", function() {
    browser({
        port: 6060,
        server: {
            baseDir: "./build"
        }
    });
});
gulp.task("sass", function() {
    gulp.src("src/sass/**/*.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest("./build/css"))
        .pipe(browser.reload({stream:true}));
});
gulp.task("html", function() {
    gulp.src("build/**/*.html")
        .pipe(plumber())
        .pipe(browser.reload({stream:true}));
});
gulp.task("default",['server'], function() {
    gulp.watch("src/ts/**/*.ts",["webpack"]);
    gulp.watch("src/sass/**/*.scss",["sass"]);
    gulp.watch("build/**/*.html",["html"]);
});

なお、webpack.config.jsとtsconfig.jsについては参考サイトのサンプルのままなので、省略。

最後に

1.のサイトで、vue.jsの追加環境などあるので、色々と組み合わせて、プロジェクトや用途に合わせた環境の使い回しができそう。
個人的にはgulpだけで、サクッと静的ページが作れる環境があればいいと思っていたのだが、やはりjsもじっくりと勉強したいと思ったとき、ブラウザにすぐ反映されるような環境があるとイメージがわきやすいのと、Tsも今後はありかな？と思ったのでwebpack構築して見ました。
そして、gulpとwebpackそれぞれコマンドでビルドするのも手間なので、一括でできるような環境が作れるようになったので、記念投稿です。

swift小結1
uuidを数値型に改造するアルゴリズム