'use strict';
var gulp = require('gulp'),
imageMin = require('gulp-imagemin'),
gutil = require('gulp-util'),
Jsmin = require ('gulp-uglify'),//js compression
Cssmin = require ('gulp-css'),//css compression
eslint = require('gulp-eslint'),
Rename = require ('gulp-rename'),//rename
sourcemaps = require('gulp-sourcemaps'),
clean = require('gulp-clean'),
webpack = require('webpack'),
gulp_webpack = require('gulp-webpack'),
webpack_config = require('./webpack.config.js'),
jsErrorCount = 0,
scss = require('gulp-sass'),// scss
Jslist = require ('./gulp-config-jslist'),//js configuration path to check
localhostServer = require('gulp-connect');
var paths = {
scripts: 'public/scripts/*/*.js',
styles: 'public/scss/*/*.scss',
html: 'public/html/*/*.html',
images: 'public/images/*/*.{jpg,png,gif}'
};
var dist_paths = {
};
gulp.task('localhostServer', function() {
localhostServer.server({
root: '../projectsweb',
livereload: true,
port: 80,
//port: 443,
//https: true,
host: ''
});
});
//check js
gulp.task('jsEslint', function() {
//The JS specific path to check needs to be set here. . If you use a fuzzy path, it will get stuck! !
return gulp.src(jsList.jsList).pipe(eslint()).pipe(eslint.result(result => {
// Called for each ESLint result.
if (result.errorCount > 0) {
gutil.log('ESLint result: ', gutil.colors.cyan(`${result.filePath}`));
gutil.log('# Errors:', gutil.colors.magenta(`${result.errorCount}`));
jsErrorCount = result.errorCount;
bracket
}));
});
//Copy the generated HTML file to each site file
gulp.task('distHtmlCopy', function() {
return gulp.src(paths.html)
.pipe(localhostServer.reload())
.pipe(gulp.dest('dist/html'));
});
//compress pictures
gulp.task('imageMin', function() {
return gulp.src(paths.images)
.pipe(imageMin())
.pipe(gulp.dest('dist/images'))
.pipe(localhostServer.reload());
});
gulp.task('cssMin', function() {
return gulp.src(paths.styles)
.pipe(scss())
.pipe(cssMin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css'))
.pipe(localhostServer.reload());
});
gulp.task('jsMin', function() {
return gulp.src(paths.scripts)
.pipe(sourcemaps.init())
.pipe(jsMin())
.pipe(sourcemaps.write())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/scripts'))
.pipe(localhostServer.reload());
});
gulp.task('watch',['localhostServer'],function(){
gulp.watch(paths.html, ['distHtmlCopy']);
gulp.watch(paths.scripts, ['jsEslint','jsMin']);
gulp.watch(paths.styles, ['cssMin']);
gulp.watch(paths.images, ['jsMin']);
});
gulp.task('default',['watch'],function(){
Log ('\ n' plus'--------------------------------------------------------------------
Log ('\n' plus'-------'plus' \ n') please do not close CMD window;
});
Is there a good configuration scheme for webpack.config.js, instead of writing the entry files one by one?
In addition, how can gulpfile.js be configured with webpack.config.js?
webpack.config.js:
module.exports = { module: { loaders: [ bracket test: /\.jsx? $/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015','react'] bracket }, bracket test: /\.(png|jpg|gif)$/, loader: 'url-loader? Limit=8192' // limit = 8192 here represents an image encoded with base64 < = 8K }, bracket test: /\.css$/, loader: 'style! css' bracket bracket bracket };
Gulp uses webpack:
gulp.src('src/js/entry/**/*.js') .pipe(named()) .pipe(webpack()) .pipe(uglify()) .pipe(gulp.dest('dist/bundle'));