LoginSignup
2

More than 5 years have passed since last update.

はじめてのgulp

Last updated at Posted at 2015-12-11

フロント側はgulpを使うと幸せになれるっぽい

↑どこで聞いたかは忘れました。
けどgulp色々書いておくと便利なことをよしなにやってくれるっぽい。
っていうことでひとまず触ってみた。
簡単な処理を作ってみる。

とりあえずプロジェクトファイルをつくってinitする

$ mkdir hoge && cd hoge
$ npm init

色々インスコ

$ npm install -g gulp 
$ npm install --save-dev gulp
$ npm install --save-dev gulp-imagemin //これは画像圧縮してくれるプラグイン。

続いてgulpfileを作る。
ここにgulpでやってほしい処理をシコシコ書いていく。

gulpfile.js
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");//さっきのプラグイン追加

//gulpのタスク
gulp.task('imageMinTask', function(){ //「imageMinTask」のとこは自由な名前でおk
  gulp.src("images/*.png")//処理したいファイル
      .pipe(imagemin())//ここでminify
      .pipe(gulp.dest("min_images"));//出力するフォルダ
});

以上でタスクは書けたので、

タスク実行

$ gulp imageMinTask

スクリーンショット 2015-12-11 20.53.48.png

でimagesフォルダに置いておいた画像が圧縮されておりました。パチパチ。

ただ毎度毎度

$ gulp imageMinTask

するのはめんどいので
watchタスクで書き直す

gulpfile.js
//gulpファイル読み込み
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");


gulp.task("imageMinTask",function(){
  gulp.src("images/*.png")
      .pipe(imagemin())
      .pipe(gulp.dest("min_images"));
});


gulp.task("watch",function(){
  gulp.watch(['images/**'],['imageMinTask']);
});

で、タスク実行

$ gulp watch

スクリーンショット 2015-12-11 20.56.48.png

こんな感じです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2