I'm injecting files like this right now:
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('inject_rev', function () {
var target = gulp.src('webapp/dist/somefolder/index.html');
var sources = gulp.src(['webapp/dist/somefolder/*.js',], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('webapp/dist/somefolder/'));
});
But in html file it includes not the path I need, how can I change this path? So for example instead of this:
<script src="/webapp/dist/somefolder/script-1253fe56bd.js"></script>
I could have this:
<script src="/my/own/directory/script-1253fe56bd.js"></script>
I think that you are referring that the dist folder is ok, that will be the public folder, but you need to change only the script-src attribute, to match the respective cdn/static source locations. try this :
.pipe( $.inject(
gulp.src( ['src/main/webapp/static/dist/**/*.js'], { read : false } ), {
addRootSlash : false,
//ignorePath : 'src/main/webapp',
transform : function ( filePath, file, i, length ) {
var newPath = filePath.replace( 'src/main/webapp/', '' );
console.log('inject script = '+ newPath);
return '<script src="${pageContext.request.contextPath}/' + newPath + '"></script>';
}
} ))
.pipe( $.inject(
gulp.src( ['src/main/webapp/static/dist/**/*.css'], { read : false } ), {
addRootSlash : false,
//ignorePath : 'src/main/webapp',
transform : function ( filePath, file, i, length ) {
var newPath = filePath.replace( 'src/main/webapp/', '' );
console.log('inject style = '+ newPath);
return '<link rel="stylesheet" href="${pageContext.request.contextPath}/' + newPath + '"/>';
}
} ))
change the gulp.src, replace() to match your environment
In my opinion you should remove the parts that you don't need, and start from scratch, adding one feature after another.
here is my gulpfile
var gulp = require( 'gulp' );
var concat = require( 'gulp-concat' );
// var concatCss = require( 'gulp-concat-css' );
var uglifyCss = require( 'gulp-uglifycss' );
var uglify = require( 'gulp-uglify' );
var minify = require( 'gulp-minify' );
var usemin = require( 'gulp-usemin' );
var imagemin = require( 'gulp-imagemin' );
// var cssnano = require('gulp-cssnano');
var sourcemaps = require( 'gulp-sourcemaps' );
var del = require( 'del' );
var dir = require( 'node-dir' );
var wiredep = require( 'wiredep' ).stream;
var debug = require( 'gulp-debug' );
var runSequence = require( 'run-sequence' );
var bower = require( 'gulp-bower' );
var $ = require( 'gulp-load-plugins' )();
var livereload = require( 'gulp-livereload' );
var injectReload = require( 'gulp-inject-reload' );
var noop = require( 'gulp-util' ).noop;
var plumber = require( 'gulp-plumber' );
var expect = require( 'gulp-expect-file' );
var liveReloadEnabled = false;
var mainBowerFiles = require( 'main-bower-files' );
var bower = require( 'gulp-bower' );
var gutil = require( 'gulp-util' );
var babel = require( 'gulp-babel' );
var browserify = require( 'gulp-browserify' );
var webserver = require( 'gulp-webserver' );
// var minimist = require('minimist');
global.Promise = require( 'bluebird' );
var Q = require( 'q' );
var DEBUG = false;
var SOURCE_MAPS = false;
var PROD = false;
var liveReloadPort = 21232;
var bower_components = 'bower_components';
var paths = {
scripts : ['src/main/javascript/**/*.js*'],// ,'!src/main/webapp/static/dist/**/*'
raw_scripts : ['src/main/webapp/WEB-INF/raw_scripts/**/*.jsp*'],
css : ['src/main/css/**/*.css'],
// bower_dir : 'src/main/webapp/' + bower_components,
bower_dir : bower_components,
// images: 'client/img/**/*'
};
gulp.task( 'main-files', function () {
return gulp.src( mainBowerFiles(), {
base : 'bower_components'
} ).pipe( gulp.dest( 'src/main/webapp/bower_components' ) );
} );
gulp.task( 'scripts-dev', function () {
return gulp.src( paths.scripts )//
.pipe( babel( {
plugins : ['transform-react-jsx', 'transform-runtime'],
presets : ['es2015']
} ) )
.pipe( DEBUG ? debug() : noop() )//
.pipe( gulp.dest( 'src/main/webapp/static/dist/js/' ) )//
} );
gulp.task( 'scripts', function () {
return gulp.src( paths.scripts )//
.pipe( babel( {
plugins : ['transform-react-jsx'],
presets : ['es2015']
} ) )
.pipe( DEBUG ? debug() : noop() )//
.pipe( SOURCE_MAPS || (!PROD) ? sourcemaps.init() : noop() )//
.pipe( uglify( {
mangle : false
} ).on( 'error', gutil.log ) )//
.on( 'error', handleError )//
.pipe( concat( 'bundle.js' ) )//
.pipe( SOURCE_MAPS || (!PROD) ? sourcemaps.write( './' ) : noop() )//
.pipe( gulp.dest( 'src/main/webapp/static/dist/' ) )//
.pipe( liveReloadEnabled ? livereload() : noop() );
} );
gulp.task( 'styles-dev', function () {
return gulp.src( paths.css )//
.pipe( DEBUG ? debug() : noop() )//
.pipe( gulp.dest( 'src/main/webapp/static/dist/css/' ) )//
} );
gulp.task( 'styles', function () {
return gulp.src( paths.css )//
.pipe( DEBUG ? debug() : noop() )//
.pipe( SOURCE_MAPS || (!PROD) ? sourcemaps.init() : noop() )//
.pipe( uglifyCss() ).pipe( concat( 'bundle.css' ) )//
.pipe( SOURCE_MAPS || (!PROD) ? sourcemaps.write( './' ) : noop() )//
.on( 'error', handleError )//
.pipe( gulp.dest( 'src/main/webapp/static/dist/' ) )//
.pipe( liveReloadEnabled ? livereload() : noop() );//
} );
var runUseminForFile = function ( file, base, onEnd ) {
return gulp.src( file, { base : base } )
.pipe( DEBUG ? debug() : noop() )
.pipe( usemin( {
path : base,
//cssnano() seems it does not work
css : [SOURCE_MAPS ? sourcemaps.init( { loadMaps : true } ) : noop(), uglifyCss( { uglyComments : true } ), 'concat', SOURCE_MAPS ? sourcemaps.write( './' ) : noop()],
// uglify() //uglify( { mangle : false } )// uglify( { mangle : false } ).on('error', gutil.log)//minify({ignoreFiles: [ 'min.js']}),
js : [SOURCE_MAPS ? sourcemaps.init( { loadMaps : true } ) : noop(), uglify( { mangle : false } ).on( 'error', gutil.log ), 'concat', SOURCE_MAPS ? sourcemaps.write( './' ) : noop()]
} ) )//
.pipe( gulp.dest( function () {
var remainingFolder = file.substring( file.indexOf( base ) + base.length, file.lastIndexOf( '/' ) + 1 );
if ( DEBUG === true )
console.log( file, remainingFolder, base );
return './tmp/vendor/' + remainingFolder + '/';
} ) )
.on( 'end', onEnd );
};
gulp.task( 'usemin', ['wiredep'], function ( cb ) {
// return
dir.files( './tmp/', function ( err, files ) {
var deferredList = [];
if ( err )
throw err;
for ( var i = 0; i < files.length; i++ ) {
var deferred = Q.defer();
var file = files[i];
if ( file.indexOf( '.jsp' ) === -1 )
continue;
if ( DEBUG === true )
console.log( 'usemin for : ' + './' + file );
runUseminForFile( './' + file, './tmp/', deferred.resolve );
deferredList.push( deferred.promise );
}
Q.all( deferredList ).then( function () {
cb();
} );
} );
} );
gulp.task( 'debug', function ( cb ) {
DEBUG = true;
cb();
} );
gulp.task( 'sourcemaps', function ( cb ) {
SOURCE_MAPS = true;
cb();
} );
gulp.task( 'clean', function () {
return del.sync( ['tmp/', 'src/main/webapp/bower_components', 'src/main/webapp/static/dist',
'src/main/webapp/static/vendor'], function ( err, paths ) {
if ( DEBUG === true )
console.log( 'Deleted files/folders:\n', paths.join( '\n' ) );
} );
} );
gulp.task( 'copy-bower-fonts', function () {
return gulp.src( paths.bower_dir + '/**/*.{ttf,woff,eof,svg}', {
base : paths.bower_dir
} ).pipe( DEBUG ? debug() : noop() )//
.pipe( gulp.dest( './src/main/webapp/static/vendor/font/' ) );
} );
gulp.task( 'copy-bower-images', function () {
return gulp.src( paths.bower_dir + '/**/*.{png,jpg,svg}', {
base : paths.bower_dir
} ).pipe( DEBUG ? debug() : noop() )//
.pipe( gulp.dest( './src/main/webapp/static/images/' ) );
} );
gulp.task( 'min-and-replace', ['usemin'], function ( cb ) {
// the base option sets the relative root for the set of files,
// preserving the folder structure
gulp.src( ['tmp/vendor/**/*.jsp*'], {
base : './tmp/vendor/'
} )//
.pipe( DEBUG ? debug() : noop() )//
.pipe( gulp.dest( 'src/main/webapp/WEB-INF/views/scripts/' ) ).on( 'end', function () {
gulp.src( ['tmp/vendor/**/*.js', 'tmp/vendor/**/*.css'], {
base : './tmp/vendor/${pageContext.request.contextPath}/static/'
} ).pipe( DEBUG ? debug() : noop() )//
.pipe( gulp.dest( 'src/main/webapp/static/' ) ).on( 'end', function () {
del.sync( ['tmp/'], function ( err, paths ) {
if ( DEBUG === true )
console.log( 'Deleted files/folders:\n', paths.join( '\n' ) );
} );
cb();
} );
} );
} );
gulp.task( 'wiredep', ['sync-install-scripts-styles'], function () {
return gulp.src( paths.raw_scripts )//
.pipe( DEBUG ? debug() : noop() )//
.pipe( wiredep( {
directory : paths.bower_dir,//
dependencies : true, // default: true
devDependencies : true, // default: false
// ignorePath : '../../',
fileTypes : {
jsp : {
replace : {
js : function ( filePath ) {
var newPath = filePath.substring( filePath.indexOf( bower_components ) + bower_components.length );
if ( DEBUG === true )
console.log( 'bower script = ' + newPath );
return '<script src="../' + paths.bower_dir + newPath + '"></script>';
},
css : function ( filePath ) {
var newPath = filePath.substring( filePath.indexOf( bower_components ) + bower_components.length );
if ( DEBUG === true )
console.log( 'bower style = ' + newPath );
return '<link rel="stylesheet" href="../' + paths.bower_dir + newPath + '"/>';
}
}
}
}
} ) )//
.pipe( $.inject( gulp.src( ['src/main/webapp/static/dist/**/*.js'], {
read : false
} ), {
addRootSlash : false,
// ignorePath : 'src/main/webapp',
transform : function ( filePath, file, i, length ) {
var newPath = filePath.replace( 'src/main/webapp/', '' );
if ( DEBUG === true )
console.log( 'inject script = ' + newPath );
return '<script src="${pageContext.request.contextPath}/' + newPath + '"></script>';
}
} ) )//
.pipe( $.inject( gulp.src( ['src/main/webapp/static/dist/**/*.css'], {
read : false
} ), {
addRootSlash : false,
// ignorePath : 'src/main/webapp',
transform : function ( filePath, file, i, length ) {
var newPath = filePath.replace( 'src/main/webapp/', '' );
if ( DEBUG === true )
console.log( 'inject style = ' + newPath );
return '<link rel="stylesheet" href="${pageContext.request.contextPath}/' + newPath + '"/>';
}
} ) )//
.pipe( gulp.dest( './tmp/' ) );
} );
gulp.task( 'sync-install-scripts-styles', function ( cb ) {
runSequence( 'install', ['scripts', 'styles'], cb );
} );
gulp.task( 'wiredep-live', function ( cb ) {
return gulp.src( paths.raw_scripts )//
.pipe( DEBUG ? debug() : noop() )//
.pipe( wiredep( {
directory : paths.bower_dir,//
dependencies : true, // default: true
devDependencies : true, // default: false
// ignorePath : '../../../../',
fileTypes : {
jsp : {
replace : {
js : function ( filePath ) {
var newPath = filePath.substring( filePath.indexOf( bower_components ) );
if ( DEBUG === true )
console.log( 'bower script = ' + newPath );
return '<script src="${pageContext.request.contextPath}/' + newPath + '"></script>';
},
css : function ( filePath ) {
var newPath = filePath.substring( filePath.indexOf( bower_components ) );
if ( DEBUG === true )
console.log( 'bower style = ' + newPath );
return '<link rel="stylesheet" href="${pageContext.request.contextPath}/' + newPath + '"/>';
}
}
}
}
} ) )//
.pipe( $.inject( gulp.src( ['src/main/webapp/static/dist/**/*.js'], {
read : false
} ), {
addRootSlash : false,
// ignorePath : 'src/main/webapp',
transform : function ( filePath, file, i, length ) {
var newPath = filePath.replace( 'src/main/webapp/', '' );
if ( DEBUG === true )
console.log( 'inject script = ' + newPath );
return '<script src="${pageContext.request.contextPath}/' + newPath + '"></script>';
}
} ) )//
.pipe( $.inject( gulp.src( ['src/main/webapp/static/dist/**/*.css'], {
read : false
} ), {
addRootSlash : false,
// ignorePath : 'src/main/webapp',
transform : function ( filePath, file, i, length ) {
var newPath = filePath.replace( 'src/main/webapp/', '' );
if ( DEBUG === true )
console.log( 'inject style = ' + newPath );
return '<link rel="stylesheet" href="${pageContext.request.contextPath}/' + newPath + '"/>';
}
} ) )//
.pipe( liveReloadEnabled ? injectReload( {
port : liveReloadPort,
host : 'http://localhost'
} ) : noop() ).pipe( gulp.dest( './src/main/webapp/WEB-INF/views/scripts/' ) );
} );
gulp.task( 'wiredep-full-live', function ( cb ) {
runSequence( 'sync-install-scripts-styles', 'wiredep-live', cb );
} );
// Copy all static images
// gulp.task('images', ['clean'], function() {
// return gulp.src(paths.images)
// // Pass in options to the task
// .pipe(imagemin({optimizationLevel: 5}))
// .pipe(gulp.dest('build/img'));
// });
// Rerun the task when a file changes
gulp.task( 'watch', function () {
liveReloadEnabled = true;
livereload.listen( liveReloadPort );
runSequence( 'wiredep-full-live' );
gulp.watch( paths.scripts, ['scripts'] );
gulp.watch( paths.css, ['styles'] );
gulp.watch( paths.raw_scripts, ['wiredep-live'] );
gulp.watch( ['bower.json'], ['wiredep-full-live'] );
} );
function handleError( error ) {
// If you want details of the error in the console
console.log( error.toString() );
if ( liveReloadEnabled === true )
this.emit( 'end' );
else
fail( error );
}
gulp.task( 'live-reload', function () {
return gulp.src( './src/main/webapp/WEB-INF/views/scripts/**/*.jsp*' ).pipe( injectReload( {
host : 'http://localhost'
} ) ).pipe( gulp.dest( './src/main/webapp/WEB-INF/views/scripts/' ) );
} );
gulp.task( 'del-components', function () {
del.sync( 'target/**/bower_components', function ( err, paths ) {
if ( DEBUG === true )
console.log( 'Deleted files/folders:\n', paths.join( '\n' ) );
} );
} );
gulp.task( 'dev', ['clean', 'sourcemaps', 'wiredep-full-live'] );
gulp.task( 'stage', function ( cb ) {
runSequence( 'clean', 'wiredep-full-live', cb );
} );
gulp.task( 'prod', function ( cb ) {
PROD = true;
runSequence( 'clean', 'min-and-replace', cb );// , 'del-components'
} );
gulp.task( 'install', function ( cb ) {
runSequence( 'bower-install', 'main-files', cb );
} );
gulp.task( 'js', function () {
return gulp.src( "src/main/javascript/app.js" )
.pipe( browserify( {
transform : 'reactify',
debug : true
} ) )
.on( 'error', function ( err ) {
console.error( 'Error!', err.message );
} )
.pipe( concat( 'bundle.js' ) )//
.pipe( gulp.dest( "src/main/webapp/static/dist/" ) );
} );
gulp.task( 'ss', function ( cb ) {
runSequence( 'clean', 'js', cb );
} );
// gulp.task('webserver', function() {
// gulp.src( app + '/')
// .pipe(webserver({
// livereload: true,
// open: true
// }));
// });
gulp.task( 'default', ['watch', 'html', 'js', 'css', 'webserver'] );
//gulp.task( 'bower-install', function( cb ) {
// bower.commands.install( [], {
// save : true
// }, {} ).on( 'end', function( installed ) {
// cb( ); // notify gulp that this task is finished
// } );
//} );
gulp.task( 'bower-install', function ( cb ) {
return bower();
} );
// The default task (called when you run `gulp` from cli)
gulp.task( 'default', ['clean', 'dev'] ); // 'images' // 'watch'