ドットインストール、gulp入門完了後の覚え書き

ドットインストール、gulp入門完了後の覚え書き アイキャッチ

gulp入門 (全12回)』を完了しました、今回はその復習としての覚え書きを。
完全に講座終了後の個人的な確認なので、省いてる部分が多いですがご了承ください。

gulp入門 (全12回) – プログラミングならドットインストール
タスクランナーであるgulpの導入についての講座になります。

事前に講座内でローカル開発環境の構築を前提として進められていますが、それについてと、インストールしたgulpのパッケージについては大幅に省いて書いてます。
(ローカル開発環境構築の参考としては、後述の参考からのリンクをご覧ください。)

 

テストディレクトリの作成

ローカル環境構築前の段階ですが、まずはターミナルでテストディレクトリを作成します。
下記の記述を実行。

$ cd sites/test && mkdir myCentOSVM

それから作成したディレクトリへ移動します。

$ cd myCentOSVM

この後はローカル開発環境構築の講座に従って作成していきます。
作成が完了したらgulp導入の段階へ。

vagrantの起動、SSHでの接続

vagrantを起動し、sshで接続

$ vagrant up && vagrant ssh

サーバーの対象ディレクトリへ移動します。

$ cd mysite

gulpの実行

かなり省きましたが、node / npm / gulp 導入のあとになります。
ある程度必要なパッケージをインストール後、タスクも設定した上で $ gulp を実行。

$ gulp

実行されるタスク

・htmlファイルのdistフォルダへのコピー
・.coffeeスクリプトの結合、圧縮、dist/js/ へ書き出し
・画像ファイルの圧縮、書き出し
・ファイルの監視(html、coffee)
・LiveReload

gulpfile.jsの記述は以下のようになりました。

var gulp = require('gulp');
var pkg = require('./package.json');

var imagemin = require('gulp-imagemin');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var header = require('gulp-header');
var webserver = require('gulp-webserver');


gulp.task('html', function() {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('img', function() {
  gulp.src('./src/img/*.png')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'));
});

gulp.task('js', function() {
  gulp.src('./src/coffee/*.coffee')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(concat('common.min.js'))
    .pipe(uglify())
    .pipe(header('/* copyright <%= pkg.author %> */', {pkg: pkg}))
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/coffee/*.coffee', ['js'])
  gulp.watch('./src/*.html', ['html'])
});

gulp.task('webserver', function() {
  gulp.src('./dist')
    .pipe(
      webserver({
        host: '192.168.33.10',
        livereload: true
      })
    );
});


gulp.task('default', ['html', 'img', 'js', 'watch', 'webserver']);

gulpfile.js

あと必要そうなもの

・Sass、Compassの使用
・上記の監視

サイトの表示・確認

$ ip a

でipアドレスを確認します。inet 192.168.33.10/24/24の手前までがそう。
構築環境によって違う場合もありますが、自分は $ gulp 実行の際に表示されるhttp://192.168.33.10:8000でindex.htmlの表示を確認。
htmlを編集すると、そのURLでLiveReloadも実行されているのが確認できます。

個人的にローカル開発環境の構築はとりあえず置いといて、現場で使えるレベルまで持って行きたいと考えています。


参考

ローカル開発環境の構築 (全13回) – プログラミングならドットインストール

Vagrant入門 (全13回) – プログラミングならドットインストール
講座内ではgulp実行の前提として、ローカル開発環境の構築が求められたので。

[CentOS] yum実行時に「Cannot retrieve metalink for repository: epel.」というエラーが出る場合の対応(SSL接続エラー) – Life with IT
ローカル環境構築時にハマったところ

 622 Views