webpack

gulp-concat webpack

More than 1 year has passed since last update.


gulp-concat

gulp 用プラグイン gulp-concat でファイルを一つにまとめる方法

http://phiary.me/gulp-concat-file/


gulpfile.js


var gulp = require('gulp');
var sass = require('gulp-sass');
var browser = require("browser-sync");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
// var webpack = require('webpack-stream');
var concat = require("gulp-concat");

gulp.task('default',['server'],function() {
gulp.watch('htdocs/sass/*.scss', ['sass']);

var files = ['htdocs/js/lib/jquery-1.10.2.min.js','htdocs/js/module/a.js', 'htdocs/js/module/b.js'];
gulp.src(files)
.pipe(concat('all.js'))
.pipe(gulp.dest('htdocs/js'));
});
gulp.task('sass',function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('htdocs/css/'))
.pipe(browser.reload({stream:true}));
});

gulp.task("server", function() {
browser({
server: {
baseDir: "htdocs/"
}
});
});



Webpack


  • WebpackはJavaScriptのモジュールを取り扱える


  • 一つのJavaScriptファイルに長い処理を書くと、

    可読性が悪くなり、バグの原因になる


  • これを解決する手段が複数ファイルへの分割です


npm install webpack-stream

https://www.npmjs.com/package/webpack-stream


参考

gulp.jsを使ってフロントエンドのビルドをする

http://yutapon.hatenablog.com/entry/2014/12/06/123000


現状

スクリーンショット 2016-10-19 13.27.25.png


gulpfile.js


var gulp = require('gulp');
var sass = require('gulp-sass');
var browser = require("browser-sync");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var webpack = require('webpack-stream');

gulp.task('default',['server'],function() {
gulp.watch('htdocs/sass/*.scss', ['sass']);
});
gulp.task('sass',function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('htdocs/css/'))
.pipe(browser.reload({stream:true}));
});

gulp.task("server", function() {
browser({
server: {
baseDir: "htdocs/"
}
});
});

gulp.task('webpack', function() {
return gulp.src('htdocs/js/app.js')
.pipe(webpack())
.pipe(gulp.dest('htdocs/js/'));

});