Gulp タスク管理

2015年10月4日

Node.jsをインストール

バージョン確認

node -v

Gulpのインストール（グローバル環境）

npm install -g gulp

package.jsonの生成

cd 移動したいディレクトリ名へのパス
npm init

Gulpのインストール（ローカル環境）

npm install gulp --save-dev

gulpfile.jsの作成

The Gulp file generator

// ジェネレーターのソース一部変更
var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images/'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('styles', function(){
	gulp.src(['src/styles/**/*.scss'])
		.pipe(plumber({
			errorHandler: function (error) {
				console.log(error.message);
				this.emit('end');
		}}))
		.pipe(sass())
		.pipe(autoprefixer('last 2 versions'))
		.pipe(gulp.dest('dist/styles/'))
		.pipe(rename({suffix: '.min'}))
		.pipe(minifycss())
		.pipe(gulp.dest('dist/styles/'))
		.pipe(browserSync.reload({stream:true}));
});

gulp.task('scripts', function(){
  return gulp.src('src/scripts/**/*.js')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('default', ['browser-sync'], function(){
  gulp.watch("src/styles/**/*.scss", ['styles']);
  gulp.watch("src/scripts/**/*.js", ['scripts']);
  gulp.watch("*.html", ['bs-reload']);
  gulp.watch("src/images/**/*", ['images']);
});

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

The Gulp file generator

npm install --save-dev gulp-plumber
npm install --save-dev gulp-rename
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-concat
npm install --save-dev gulp-uglify
npm install --save-dev gulp-imagemin
npm install --save-dev gulp-cache
npm install --save-dev gulp-minify-css
npm install --save-dev gulp-sass
npm install --save-dev browser-sync
// npm install --save-dev gulp-connect-php htmlではなくphpの場合

// sassでエラーが出たら一度アンインストール後、インストール
npm uninstall --save-dev gulp-sass
npm install --save-dev gulp-sass

htmlではなく、phpで動作させる

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

npm install --save-dev gulp-connect-php

gulpfile.js

var gulp = require('gulp'),
	plumber = require('gulp-plumber'),
	rename = require('gulp-rename'),
	connect = require('gulp-connect-php'),
	autoprefixer = require('gulp-autoprefixer'),
	concat = require('gulp-concat'),
	uglify = require('gulp-uglify'),
	imagemin = require('gulp-imagemin'),
	cache = require('gulp-cache'),
	minifycss = require('gulp-minify-css'),
	sass = require('gulp-sass'),
	browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
connect.server({
	port:80,
	base:'./',
	}, function (){
		browserSync({
			proxy: 'localhost:80/'
		});
	});
});

gulp.task('bs-reload', function () {
	browserSync.reload();
});

gulp.task('img', function(){
	gulp.src('src/images/**/*')
	.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
	.pipe(gulp.dest('images/'))
	.pipe(browserSync.reload({stream:true}));
});

gulp.task('css', function(){
	gulp.src(['src/scss/**/*.scss'])
	.pipe(plumber({
		errorHandler: function (error) {
			console.log(error.message);
			this.emit('end');
		}
	}))
	.pipe(sass())
	.pipe(concat('style.css'))
	.pipe(autoprefixer('last 2 versions'))
	.pipe(gulp.dest('css/'))
	.pipe(rename({suffix: '.min'}))
	.pipe(minifycss())
	.pipe(gulp.dest('stylesheets/'))
	.pipe(browserSync.reload({stream:true}));
});

gulp.task('js', function(){
	gulp.src('src/javascript/**/*.js')
	.pipe(plumber({
		errorHandler: function (error) {
			console.log(error.message);
			this.emit('end');
		}
	}))
	.pipe(concat('module.js'))
	.pipe(gulp.dest('javascript/'))
	.pipe(rename({suffix: '.min'}))
	.pipe(uglify())
	.pipe(gulp.dest('javascript/'))
	.pipe(browserSync.reload({stream:true}));
});

gulp.task('default', ['browser-sync'], function(){
	gulp.watch("src/scss/**/*.scss", ['css']);
	gulp.watch("src/javascript/**/*.js", ['js']);
	gulp.watch("src/images/**/*", ['img']);
	gulp.watch("./*.php", ['bs-reload']);
});

gulp, 未分類