gulp20140904

gulpfile.js

'use strict';

var gulp = require('gulp'),
	$ = require('gulp-load-plugins')(),
	jade = require('gulp-jade'),
	browserSync = require('browser-sync'),
	reload = browserSync.reload,
	runSequence = require('run-sequence'),
	spritesmith = require('gulp.spritesmith');

gulp.task('jade', function() {
	var YOUR_LOCALS = {};

	return gulp.src('app/jade/*.jade')
		.pipe($.plumber())
		.pipe(jade({
			locals: YOUR_LOCALS,
			pretty: true
		}))
		.pipe(gulp.dest('dist'));
});

//scss
gulp.task('scss', function () {
	return gulp.src(['app/sass/style.scss'])
		.pipe($.plumber())
		.pipe($.rubySass({
			style: 'expanded',
			precision: 10,
			loadPath: ['app/sass']
		}))
		.pipe($.pleeease())
		.pipe(gulp.dest('dist/style'));
});

//stylus
gulp.task('stylus', function () {
	return gulp.src(['app/stylus/style.styl'])
		.pipe($.plumber())
		.pipe($.stylus({compress: true}))
		// .pipe($.pleeease())
		.pipe(gulp.dest('dist/style'));
});

gulp.task('js', function () {
	return gulp.src(['app/js/script.js'])
		.pipe($.plumber())
		// .pipe($.pleeease())
		.pipe(gulp.dest('dist/js'));
});

gulp.task('sprite', function () {
	var spriteData = gulp.src('app/images/sprites/*.png') //スプライトにする愉快な画像達
	.pipe(spritesmith({
		imgName: 'sprite.png', //スプライトの画像
		cssName: '_sprite.scss', //生成されるscss
		imgPath: '../images/sprite.png', //生成されるscssに記載されるパス
		cssFormat: 'scss', //フォーマット
		cssVarMap: function (sprite) {
			sprite.name = 'sprite-' + sprite.name; //VarMap(生成されるScssにいろいろな変数の一覧を生成)
		}
	}));
	spriteData.img.pipe(gulp.dest('app/images/'));
	spriteData.img.pipe(gulp.dest('dist/images/'));  //imgNameで指定したスプライト画像の保存先
	spriteData.css.pipe(gulp.dest('app/sass/utils/')); //cssNameで指定したcssの保存先
});

gulp.task('watch', function () {
	browserSync.init(null, {
		server: {
		baseDir: ['dist']
		},
		notify: false
	});
	// gulp.watch('app/**/*.jade', reload);
	gulp.watch('app/**/*.jade', ['jade']);
	// gulp.watch('app/**/*.jade', reload);
	// gulp.watch('app/**/*.scss', reload);
	gulp.watch('app/**/*.scss', ['scss']);
	gulp.watch('app/**/*.js', ['js']);
	// gulp.watch('app/**/*.scss', reload);
	// gulp.watch('app/**/*.styl', reload);
	// gulp.watch('app/**/*.styl', ['stylus']);
	gulp.watch('dist/**/*.html', reload);
	gulp.watch('dist/**/*.css', reload);
	gulp.watch('dist/**/*.js', reload);

});

package.json

{
  "name": "gulp",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^1.3.0",
    "gulp": "^3.8.6",
    "gulp-jade": "^0.6.1",
    "gulp-load-plugins": "^0.5.3",
    "gulp-pleeease": "0.0.5",
    "gulp-plumber": "^0.6.4",
    "gulp-ruby-sass": "^0.5.0",
    "gulp-stylus": "^1.1.0",
    "gulp.spritesmith": "^1.1.1",
    "run-sequence": "^0.3.6"
  }
}