riot gulp フロントエンド開発環境
riot gulp npm
github
package.json
{
"devDependencies": {
"browser-sync": "^2.17.0",
"browserify": "^13.1.0",
"gulp": "~3.9.1",
"gulp-compass": "~2.0.1",
"gulp-convert-encoding": "^1.0.0",
"gulp-jade": "^1.1.0",
"gulp-livereload": "2.1.1",
"gulp-plumber": "^1.1.0",
"gulp-riot": "^0.5.5",
"gulp-watch": "~1.1.0",
"riotify": "^1.0.1",
"vinyl-source-stream": "^1.1.0"
}
}
gulpfile.js
require("./gulptask.js");
gulptask.js
'use strict';
var gulp = require('gulp');
var compass = require('gulp-compass');
var livereload = require('gulp-livereload');
var browserify = require('browserify');
var riotify = require('riotify');
var source = require('vinyl-source-stream');
var browsersync = require("browser-sync");
var jade = require('gulp-jade');
var convertEncoding = require('gulp-convert-encoding');
var plumber = require('gulp-plumber');
/*
* Compass
*/
gulp.task('compass', function(){
gulp.src('./src/scss/**/*.scss')
.pipe(plumber())
.pipe(compass({
config_file: 'config.rb',
comments: false,
css: './dest/css',
sass: './src/scss'
}))
.pipe(convertEncoding({to: "utf-8"}))
.pipe(gulp.dest('./dest/css'))
.pipe(browsersync.stream());
});
/*
* jade
*/
gulp.task('jade', function () {
return gulp.src(['./src/jade/**/*.jade', '!./src/jade/**/_*.jade'])
.pipe(plumber())
.pipe(jade({
pretty: true
}))
.pipe(convertEncoding({to: "utf-8"}))
.pipe(gulp.dest('./dest/'))
.pipe(browsersync.stream());
});
/*
* riot
*/
gulp.task('concat', function () {
return browserify({entries: ['./src/main.js']})
.transform(riotify, { template: 'jade' })
.bundle()
.on('error', function (err) {
console.log(err.toString());
this.emit('end');
})
.pipe(source('main.bundle.js'))
.pipe(convertEncoding({to: "utf-8"}))
.pipe(gulp.dest('./dest/'))
.pipe(browsersync.stream());
});
/*
* BrowserSync
*/
gulp.task('server', function () {
browsersync.init({
server: {
baseDir: 'dest'
},
open: false,
});
});
/*
* Watch
*/
gulp.task('default', ['server'], function() {
gulp.watch("./dest/*", function() {
browsersync.reload();
});
gulp.watch("./src/**/*.js", ['concat']);
gulp.watch("./src/**/*.tag", ['concat']);
gulp.watch("./src/**/*.scss", ['compass']);
gulp.watch("./src/**/*.jade", ['jade']);
});
Author And Source
この問題について(riot gulp フロントエンド開発環境), 我々は、より多くの情報をここで見つけました https://qiita.com/toknsi/items/f60375cd847113e916e2著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .