When i run a server in the root of the application and browse to /dist, my app works.
When i run the webserver in the Dist folder, I only see the index.html, but react won't render the page.
my gulp file is this:
var gulp = require('gulp');
var plug = require('gulp-load-plugins')({lazy: true});
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var del = require('del');
var sass = require('gulp-sass');
gulp.task('build', ['sass'], function () {
return browserify({
extensions: ['.jsx', '.js'],
entries: './src/app.jsx',
})
.transform(babelify.configure({ignore: /(node_modules)/}))
.bundle()
.on("error", function (err) {
console.log("Error : " + err.message);
})
.pipe(source('app.js'))
.pipe(buffer())
.pipe(plug.uglify())
.pipe(gulp.dest('./dist/'));
});
gulp.task('clean', function () {
return del('dist/**', {force: true});
});
gulp.task('copy-files', ['clean'], function () {
return gulp.src(['./src/index.html', './favicon.ico','./src/contact.html'])
.pipe(gulp.dest('./dist/'));
});
gulp.task('copy-images', ['copy-files'], function () {
return gulp.src(['./src/img/**/*'])
.pipe(gulp.dest('./dist/img'));
});
gulp.task('sass', ['copy-images'], function () {
return gulp.src('./src/css/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});
Am I doing something wrong in my gulp file, or is there an other cause?
Related
Can any one help me with a gulp file?
I want to start my express server when i run gulp dev. The express server starts in my app.js file. I tried to modify the app.js file but that causes an error.
How do i implement that ?
var gulp = require('gulp')
var sass = require('gulp-sass')
var header = require('gulp-header')
var cleanCSS = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var pkg = require('./package.json')
var browserSync = require('browser-sync').create()
var server = require('gulp-develop-server')
var express = require('express')
var app = express()
// Copy third party libraries from /node_modules into /vendor
gulp.task('vendor', function () {
// Bootstrap
gulp.src([
'./node_modules/bootstrap/dist/**/*',
'!./node_modules/bootstrap/dist/css/bootstrap-grid*',
'!./node_modules/bootstrap/dist/css/bootstrap-reboot*'
])
.pipe(gulp.dest('./vendor/bootstrap'))
// Font Awesome
gulp.src([
'./node_modules/font-awesome/**/*',
'!./node_modules/font-awesome/{less,less/*}',
'!./node_modules/font-awesome/{scss,scss/*}',
'!./node_modules/font-awesome/.*',
'!./node_modules/font-awesome/*.{txt,json,md}'
])
.pipe(gulp.dest('./vendor/font-awesome'))
// jQuery
gulp.src([
'./node_modules/jquery/dist/*',
'!./node_modules/jquery/dist/core.js'
])
.pipe(gulp.dest('./vendor/jquery'))
// jQuery Easing
gulp.src([
'./node_modules/jquery.easing/*.js'
])
.pipe(gulp.dest('./vendor/jquery-easing'))
// Simple Line Icons
gulp.src([
'./node_modules/simple-line-icons/fonts/**'
])
.pipe(gulp.dest('./vendor/simple-line-icons/fonts'))
gulp.src([
'./node_modules/simple-line-icons/css/**'
])
.pipe(gulp.dest('./vendor/simple-line-icons/css'))
})
// Compile SCSS
gulp.task('css:compile', function () {
return gulp.src('./scss/**/*.scss')
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./css'))
})
// Minify CSS
gulp.task('css:minify', ['css:compile'], function () {
return gulp.src([
'./css/*.css',
'!./css/*.min.css'
])
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream())
})
// CSS
gulp.task('css', ['css:compile', 'css:minify'])
// Minify JavaScript
gulp.task('js:minify', function () {
return gulp.src([
'./js/*.js',
'!./js/*.min.js'
])
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./js'))
.pipe(browserSync.stream())
})
// JS
gulp.task('js', ['js:minify'])
// Default task
gulp.task('default', ['css', 'js', 'vendor'])
gulp.task('express', function () {
app.use(express.static(__dirname))
app.listen(6006, '0.0.0.0') // <- CHANGE PORT NUMBER TO PREFERRED
CHOICE
})
// Configure the browserSync task
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: './'
}
})
})
// Dev task
gulp.task('dev', ['express', 'css', 'js', 'browserSync'], function () {
gulp.watch('./scss/*.scss', ['css'])
gulp.watch('./js/*.js', ['js'])
gulp.watch('./*.html', browserSync.reload)
})
I get this error:
Uncaught ReferenceError: require is not defined
I know that in the browser you can not use require API, just trying to make it possible with browserify or requirejs or whatelse but it doesn't work in any way.
This is my gulpfile
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
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/'));
});
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(babel())
.pipe(browserify())
.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']);
});
and this is my main.js, just an import of a plugin anime.js
import anime from 'animejs'
Also tried with requireJs but it seems a bit hard to integrate it in my gulpfile, also webpack seems to be hard code for me.
Gulp setup is working fine for me in local.
But i want like if i change files in local then it will build and uploaded to live server automatically (minified css and js/compiled css/js).
I have tried gulp-rsync, vinyl-ftp but couldn't succeed may be i don't know how to use above packages.
Here is a my gulp file.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
// Development Tasks
// -----------------
// Start browserSync server
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
}
})
})
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('app/css')) // Outputs it in the css folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
})
// Watchers
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
// Optimization Tasks
// ------------------
// Optimizing CSS and JavaScript
gulp.task('useref', function() {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
// Optimizing Images
gulp.task('images', function() {
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'))
});
// Copying fonts
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', function() {
return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync'], 'watch',
callback
)
})
gulp.task('build', function(callback) {
runSequence(
'clean:dist',
'sass',
['useref', 'images', 'fonts'],
callback
)
})
And here is a my folder structure.
This is main folder
It's a development folder
And this one is production folder in which all files are build.
I have a gulp file set up and I have properly minified all of my scripts and css files with the exception of my bundle.jsand my homeBundle.js. I have the uglify() function running in each one of my tasks, but receive the following error when I try to gulp.
events.js:141
throw er; // Unhandled 'error' event
^ Error: /Users/Documents/RTVS360/bundle.js: Streaming not supported
Is there an issue when gulp tries to uglify because it recreates the file every time gulp is ran?
Below you can see my gulpfile. Any help would be gladly appreciated.
var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
var glob = require('glob');
var streamify = require('gulp-streamify');
gulp.task('watchify', function () {
var bundler = browserify({
entries: ['./client/main.jsx'],
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () {
watcher.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dest/'));
})
.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dest/'));
});
gulp.task('browserify', function () {
var testFiles = glob.sync('./client/main.jsx');
var bundler = browserify({
entries: testFiles,
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
function rebundle() {
bundler
.bundle()
.on('error', function(err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest/'));
}
return rebundle();
});
gulp.task('home', function () {
var testFiles = glob.sync('./client/homepage.jsx');
var bundler = browserify({
entries: testFiles,
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
function rebundle() {
bundler
.bundle()
.on('error', function(err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('homeBundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest/'));
}
return rebundle();
});
// Uglify Scripts
gulp.task('scripts', function() {
gulp.src('assets/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
// Minify Styles
gulp.task('styles', function() {
gulp.src('./assets/css/**/*.css')
.pipe(uglifycss({
"max-line-len": 80
}))
.pipe(gulp.dest('./dist/css'));
});
gulp.task('default', ['browserify', 'home','scripts', 'styles']);
You need to use streamify together with gulp-uglify.
It seems you are importing the streamify plugin, but you are not using it.
You should wrap your uglify calls with a streamify function. Example:
var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var streamify = require('gulp-streamify');
gulp.task('watchify', function () {
var bundler = browserify({
entries: ['main.jsx'],
transform: [reactify],
// You probably would like to change these two flags to false for
// production since they increase the size of your output file
debug: true,
fullPaths: true,
cache: {},
packageCache: {}
});
var watcher = watchify(bundler);
return watcher
.on('update', function () {
watcher.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('./dest/'));
})
.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(streamify(uglify())) // wrap uglify with the streamify plugin
.pipe(gulp.dest('./dest/'));
});
gulp.task('default', ['watchify']);
Gulp-uglify does not support streaming vinyl file objects by itself so you need to use the streamify plugin to make it support streams.
I get a minified bundle file, i want to get a non-minified bundle with it in the same dist.
gulpfile.js
'use strict';
var gulp = require('gulp'),
gulpLoad = require('gulp-load-plugins'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
del = require('del'),
pkg = require('./package.json'),
$ = gulpLoad(),
DIST = './dist',
SRC = './src/index.js';
gulp.task('clean', function(fn) {
return del(DIST, fn);
})
gulp.task('lint', function() {
return gulp.src(SRC)
.pipe($.jshint())
.pipe($.jshint.reporter('default'))
});
gulp.task('bundle', ['lint', 'clean'], function() {
var b = browserify();
return b.bundle()
.pipe(source('./ar-string.min.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({loadMaps: true}))
.pipe($.uglify())
.on('error', $.util.log)
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(DIST));
});
gulp.task('default', function() {
gulp.watch([SRC, './gulpfile.js'], ['bundle']);
});
EDIT: Actually, I don't think this can be done in one pipe, we could have two, one which doesn't minify, and one which minifies and source maps:
b.bundle()
.pipe(source('./ar-string.js'))
.pipe(gulp.dest(DIST));
return b.bundle()
.pipe(source('./ar-string.min.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({loadMaps: true}))
.pipe($.uglify())
.on('error', $.util.log)
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(DIST));