gulp.jsの基本

Javascript

2016年12月31日

schooで勉強したgulpの使い方のメモ
全部授業を受けながら書いたもの。

gulpのインストール

mkdir gulp
cd gulp
npm init
npm install --save-dev gulp-cli

gulpのプラグインをインストール

使用するプラグインのインストール

npm install --save-dev gulp-sass
npm install --save-dev browser-sync

gulpfile.jsの作成

gulp:task(“タスク名”)
src:対象ファイル名
pipe:処理
gulp.dest
gulp コマンドで監視中になる

gulp-sass

var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("basic", function(){
// ファイルの監視を行う
gulp.watch("css/style.scss", function(){
    gulp.src("css/style.scss")
// sassのコンパイルを行う
    .pipe(sass())
// destでコンパイル後のファイルの置き場所を指定
    .pipe(gulp.dest("css/"));
  });
});

browser-sync

ファイルの変更を行った時に自動でリロードしてくれる

インストール

npm install --save-dev browser-sync

使い方

デフォルトのタスクに追加する。

var gulp = require("gulp");↲
var browserSync = require("gulp-browsersync");↲
↲
gulp.task("default", function(){↲
 browserSync.init({↲
>...server:{↲
>...>...baseDir: "./src"↲
>...}↲
 });_↲
↲
gulp.watch("src/**", function(){↲
>...browserSync.reload();↲
>...});↲
});↲

リリースファイルの作成

リリースフォルダにファイルをコピーしてその後開発ファイルを削除する。

var gulp = require("gulp");↲
var del = require("del")↲
↲
gulp.task("copy", function(){↲
>...return gulp.src("src/index.html")↲
>...>....pipe(gulp.dest("dist"));↲
});↲
↲
gulp.task("clean", function(){↲
>...del("index.html");↲
});↲
↲
gulp.task("default", ["copy", "clean"]);↲

タスクを個別実行

gulp タスク名

上記の中で非同期実行でなく同期実行をさせるには上記のようにタスクをreturnする。

その他

下記のエラーが表示された場合

Local gulp not found in

下記を実行すると直る

npm link gulp

---