Related
Integrating GULP with my React Project. On firing up the project, the following is the error that I face: https://prnt.sc/trw1if
Do check the screenshot above. This is a particular issue that I face.
Do let me know what am I doing wrong here. I've tried different presets for it as well. I am also attaching my GULP file here:
var gulp = require('gulp');
var babel = require('gulp-babel');
var sass = require('gulp-sass');
const imagemin = require('gulp-imagemin');
var concat = require('gulp-concat');
var uglify = require("gulp-uglify");
var browserSync = require("browser-sync").create();
const rollup = require('gulp-better-rollup');
// const babel = require('rollup-plugin-babel');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
gulp.task('jsCompile', function () {
return gulp.src(['src/*.js', 'src/**/*.js', 'src/**/**/*.js'])
.pipe(babel({
presets: ['#babel/preset-react', '#babel/preset-env']
})
.on('error', function (err) {
console.log('[Compilation Error]');
console.log(err.fileName + (err.loc ? `( ${err.loc.line}, ${err.loc.column} ): ` : ': '));
console.log('error Babel: ' + err.message + '\n');
console.log(err.codeFrame);
this.emit('end');
}))
// .pipe(rollup({ plugins: [babel(), resolve(), commonjs()] }, 'umd'))
.pipe(uglify())
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream())
});
gulp.task('htmlCompile', function () {
return gulp.src(['public/*.html'])
.pipe(gulp.dest('dist/'))
});
gulp.task('sassCompile', function () {
return gulp.src(['src/*.scss', 'src/*.css'])
.pipe(concat('main.css'))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css'))
});
gulp.task('imageCompile', function () {
return gulp.src(['src/assets/images/*.jpg', 'src/assets/images/*.png'])
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'))
});
gulp.task('broswerReload', function () {
browserSync.init(["dist/css/*.css", "dist/js/*.js"], {
server: {
baseDir: "./dist"
}
})
});
gulp.task('serve', gulp.parallel('jsCompile', 'htmlCompile', 'imageCompile', 'broswerReload'), function () {
// gulp.watch(['src/*.scss', 'src/*.css'], ['sassCompile']);
gulp.watch('src/*.js', ['jsCompile']);
gulp.watch(['src/assets/images/*.jpg', 'src/assets/images/*.png'], ['imageCompile']);
gulp.watch('public/*.html', ['htmlCompile'])
// gulp.watch('public/*.html', ['htmlCompile']).on('change', browserSync.reload);
});
gulp.task('default', gulp.series('serve'));
I'm trying to customize a template for a demo of a webapp built on AngularJS using MacOS Sierra 10.13.6. I've installed Gulp but when I launch gulp serve return this error without launching the local server:
assert.js:337 throw err; ^
AssertionError [ERR_ASSERTION]: Task function must be specified at
Gulp.set [as _setTask]
(/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task
(/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/node_modules/undertaker/lib/task.js:13:8)
at Object.
(/Users/barkia/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js:9:6)
at Module._compile (internal/modules/cjs/loader.js:689:30) at
Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32) at
tryModuleLoad (internal/modules/cjs/loader.js:538:12) at
Function.Module._load (internal/modules/cjs/loader.js:530:3) at
Module.require (internal/modules/cjs/loader.js:637:17) at require
(internal/modules/cjs/helpers.js:20:18)
Here is the gulpfile.js actually in ~/Desktop/Elysium/repos/elysium-webapp/material/gulpfile.js
I've deleted the previous error regarding /usr/local/share/man/man1/gulp.1 by launching npm uninstall -g gulp and after npm install -g gulp but I still have that issues on assert.js:337
var gulp = require('gulp');
var args = require('yargs').argv;
var browserSync = require('browser-sync');
var config = require('./gulp.config')();
var del = require('del');
var $ = require('gulp-load-plugins')({lazy: true});
gulp.task('help', $.taskListing);
gulp.task('default', ['help']);
gulp.task('vet', function() {
log('Analyzing source with JSHint and JSCS');
return gulp
.src(config.alljs)
.pipe($.if(args.verbose, $.print()))
.pipe($.jscs())
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
.pipe($.jshint.reporter('fail'));
});
gulp.task('clean-tmp', function(done) {
var files = config.tmp;
clean(files, done);
});
gulp.task('clean', function(done) {
var delconfig = [].concat(config.dist, config.tmp);
log('Cleaning ' + $.util.colors.blue(delconfig));
del(delconfig, done);
});
gulp.task('clean-all', function(done) {
var delconfig = config.allToClean;
log('Cleaning ' + $.util.colors.blue(delconfig));
clean(delconfig, done);
});
gulp.task('pug-docs', function() {
log('Compiling docs pug --> html');
var options = {
pretty: false
}
return gulp
.src(config.docsPug)
.pipe($.plumber({errorHandler: swallowError}))
.pipe($.pug(options))
.pipe(gulp.dest(config.docs));
});
gulp.task('less', function() {
log('Compiling Less --> CSS');
return gulp
.src(config.less)
.pipe($.plumber({errorHandler: swallowError}))
.pipe($.less())
.pipe($.autoprefixer())
.pipe(gulp.dest(config.tmp));
});
gulp.task('less-watcher', function() {
gulp.watch([config.less], ['less']);
});
gulp.task('sass', function() {
log('Compiling Sass --> CSS');
var sassOptions = {
outputStyle: 'nested' // nested, expanded, compact, compressed
};
return gulp
.src(config.sass)
.pipe($.plumber({errorHandler: swallowError}))
.pipe($.sourcemaps.init())
.pipe($.sass(sassOptions))
.pipe($.autoprefixer())
.pipe($.sourcemaps.write())
.pipe(gulp.dest(config.tmp + '/styles'));
});
gulp.task('sass-min', function() {
log('Compiling Sass --> minified CSS');
var sassOptions = {
outputStyle: 'compressed' // nested, expanded, compact, compressed
};
return gulp
.src(config.sass)
.pipe($.plumber({errorHandler: swallowError}))
.pipe($.sass(sassOptions))
.pipe($.autoprefixer())
.pipe(gulp.dest(config.tmp + '/styles'));
})
gulp.task('sass-watcher', function() {
gulp.watch([config.sass], ['sass']);
});
gulp.task('inject', function() {
log('Injecting custom scripts to index.html');
return gulp
.src(config.index)
.pipe( $.inject(gulp.src(config.js), {relative: true}) )
.pipe(gulp.dest(config.client));
});
gulp.task('copy', ['sass-min'], function() {
log('Copying assets');
var assets = [].concat(config.assetsLazyLoad, config.assetsToCopy);
gulp.src(config.tmp + '/styles/loader.css').pipe(gulp.dest(config.dist + '/styles'));
return gulp
.src(assets, {base: config.client})
.pipe(gulp.dest(config.dist + '/'));
});
gulp.task('optimize', ['inject', 'sass-min'], function() {
log('Optimizing the js, css, html');
return gulp
.src(config.index)
.pipe($.plumber({errorHandler: swallowError}))
.pipe($.useref())
.pipe($.if('scripts/app.js', $.uglify()))
.pipe(gulp.dest( config.dist ));
});
gulp.task('serve', ['inject', 'sass'], function() {
startBrowserSync('serve');
});
gulp.task('build', ['optimize', 'copy'], function() {
startBrowserSync('dist');
})
gulp.task('serve-dist', function() {
gulp.run('build');
})
gulp.task('serve-docs', ['pug-docs'], function() {
startBrowserSync('docs');
})
function clean(path, done) {
log('Cleaning: ' + $.util.colors.blue(path));
del(path, done);
}
function log(msg) {
if (typeof(msg) === 'object') {
for (var item in msg) {
if (msg.hasOwnProperty(item)) {
$.util.log($.util.colors.green(msg[item]));
}
}
} else {
$.util.log($.util.colors.green(msg));
}
}
function swallowError (error) {
// If you want details of the error in the console
console.log(error.toString());
this.emit('end');
}
function startBrowserSync(opt) {
if (args.nosync || browserSync.active) {
return;
}
var options = {
port: 3000,
ghostMode: {
clicks: false,
location: false,
forms: false,
scroll: true
},
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'gulp-patterns',
notify: true,
reloadDelay: 0, //1000,
online: false
};
switch(opt) {
case 'dist':
log('Serving dist app');
serveDistApp();
break;
case 'docs':
log('Serving docs');
serveDocs();
break;
default:
log('Serving app');
serveApp();
break;
}
function serveApp() {
gulp.watch([config.sass], ['sass']);
options.server = {
baseDir: [
config.client,
config.tmp
]
};
options.files = [
config.client + '/**/*.*',
'!' + config.sass,
config.tmp + '/**/*.css'
];
browserSync(options);
}
function serveDistApp() {
options.server = {
baseDir: [
config.dist
]
};
options.files = [];
browserSync(options);
}
function serveDocs() {
gulp.watch([config.docsPug], ['pug-docs']);
options.server = {
baseDir: [
config.docs
]
}
options.files = [
config.docs + '/index.html',
'!' + config.pug
];
browserSync(options);
}
}
I just run into the same problem while upgrading to gulp 4.
The depending tasks have to be specified as series or in parallel, just the name is not enough anymore.
Example
gulp.task('copy', ['sass-min'], function() {
Becomes
gulp.task('copy', gulp.series('sass-min'), function() {
gulp.parallel can also be used to execute the tasks in parallel
I had this exact problem with Gulp and it turns out that you must do away with tasks like that.
You must define your tasks as simple functions and then use your functions to define a task with gulp.series() or gulp.parallel().
I don't use this on Angular, but here's my gulpfile:
const bsync = require('browser-sync');
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const sass = require('gulp-sass');
function sync(done) {
bsync.init({
files: [
'*.html',
'assets/css/**/*.css',
'assets/js/**/*.js'
],
host: '0.0.0.0',
server: './',
port: 8080,
reloadDelay: 1000,
ghostMode: false,
notify: false
});
done();
}
function styles() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(autoprefixer({ remove: false }))
.pipe(gulp.dest('./assets/css'))
.pipe(bsync.stream());
}
function watchFiles() {
gulp.watch('./assets/scss/**/*.scss', styles);
}
gulp.task('start', gulp.series(sync, styles, watchFiles));
I've got inspired by this example. Hope it helps.
This is my gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var livereload = require('gulp-livereload');
var del = require('del');
var minifyCss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var ngAnnotate = require('gulp-ng-annotate');
var sourcemaps = require('gulp-sourcemaps');
var paths = {
html: {entry: ['public/angular/entry.html'], partials: ['public/angular/partials/**/*.html'], views: ['public/angular/views/**/*.html']},
dist: 'public/dist',
bower_components: ['bower_components/jquery/dist/jquery.min.js', 'bower_components/jquery.cookie/jquery.cookie.js', 'bower_components/bootstrap/dist/js/bootstrap.min.js', 'bower_components/jquery.nicescroll/jquery.nicescroll.min.js','bower_components/jquery-sparkline/dist/jquery.sparkline.min.js', 'bower_components/jquery.easing/jquery.easing.min.js', 'bower_components/bootbox.js/bootbox.js', 'bower_components/retina.js/dist/retina.min.js', 'bower_components/angular/angular.min.js', 'bower_components/angular-sanitize/angular-sanitize.min.js', 'bower_components/angular-touch/angular-touch.min.js', 'bower_components/angular-animate/angular-animate.min.js', 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js', 'bower_components/oclazyload/dist/ocLazyLoad.min.js', 'bower_components/angular-ui-router/release/angular-ui-router.min.js', 'bower_components/angular-ui-router/release/stateEvents.min.js', 'bower_components/angular-loading-bar/build/loading-bar.min.js', 'bower_components/angular-ui-select/dist/select.js', 'bower_components/checklist-model/checklist-model.js'],
app_scripts: ['public/angular/scripts/app.js', 'public/angular/scripts/**/*.js'],
app_styles: ['public/angular/styles/reset.css', 'public/angular/styles/layout.css', 'public/angular/styles/components.css', 'public/angular/styles/plugins.css', 'public/angular/styles/themes/green-army.theme.css', 'public/angular/styles/custom.css', 'public/angular/styles/layout/header-loggedin.css', 'public/angular/styles/layout/header-loggedout.css', 'public/angular/styles/pages/sign-in.css', 'public/angular/styles/pages/pos.css', 'public/angular/styles/pages/brand.css', 'public/angular/styles/pages/products.css', 'public/angular/styles/pages/pricing.css', 'public/angular/styles/pages/landing-page.css', 'public/angular/styles/pages/company-profile.css', 'public/angular/styles/invoice-print.css', 'public/angular/styles/angular-custom.css'],
bower_components_styles: ['bower_components/bootstrap/dist/css/bootstrap.min.css', 'bower_components/font-awesome/css/font-awesome.min.css', 'bower_components/animate.css/animate.min.css', 'bower_components/angular-loading-bar/build/loading-bar.min.css', 'bower_components/angular-ui-select/dist/select.min.css', 'bower_components/angular-ui-select/dist/select.css', 'bower_components/angular-bootstrap/ui-bootstrap-csp.css']
};
gulp.task('clean', function () {
return del.sync([paths.dist]);
});
gulp.task('html', ['mainHtml', 'partialsHtml', 'viewsHtml'], function() {
console.log('copying html files started');
});
gulp.task('mainHtml', function() {
gulp.src(paths.html.entry)
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(rename('index.html'))
.pipe(gulp.dest(paths.dist));
});
gulp.task('partialsHtml', function() {
gulp.src(paths.html.partials)
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(paths.dist + '/partials'));
});
gulp.task('viewsHtml', function() {
gulp.src(paths.html.views)
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(paths.dist + '/views'));
});
gulp.task('styles', ['bower-styles', 'app-styles'], function(){
console.log('starting styles task');
})
gulp.task('bower-styles', function(){
return gulp.src(paths.bower_components_styles)
.pipe(autoprefixer())
.pipe(concat('bower_styles.css'))
.pipe(minifyCss())
.pipe(gulp.dest(paths.dist))
})
gulp.task('fonts', function() {
return gulp.src(['bower_components/font-awesome/fonts/fontawesome-webfont.*'])
.pipe(gulp.dest('public/dist/fonts/'));
});
gulp.task('app-styles', function(){
return gulp.src(paths.app_styles)
.pipe(autoprefixer())
.pipe(concat('app_styles.css'))
.pipe(minifyCss())
.pipe(gulp.dest(paths.dist))
})
gulp.task('scripts', ['bower_scripts','app_scripts'], function(){
console.log('starting scripts task');
})
gulp.task('bower_scripts', function(){
console.log('starting bower scripts task');
return gulp.src(paths.bower_components)
.pipe(sourcemaps.init())
.pipe(ngAnnotate())
.pipe(uglify({mangle:false}))
.pipe(concat('bower_scripts.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.dist))
})
gulp.task('app_scripts', function(){
console.log('starting app scripts task');
return gulp.src(paths.app_scripts)
.pipe(sourcemaps.init())
.pipe(ngAnnotate())
.pipe(uglify({mangle:false}))
.pipe(concat('app_scripts.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.dist))
})
gulp.task('default', ['clean', 'html', 'styles', 'fonts', 'scripts'], function(){
console.log('starting default task');
})
This is the output generated for the particular controller
"use strict";angular.module("sbApp").controller("BrandsCtrl",["$scope","$rootScope","$state","CustomStorage","Brands","$uibModalStack",function($scope,$rootScope,$state,CustomStorage,Brands,$uibModalStack){$scope.vm={brand:{title:"",description:""}},$scope.createBrand=function(){return $scope.vm.errorMsg="",$scope.vm.successMsg="",""==$scope.vm.brand.title||null==$scope.vm.brand.title||void 0==$scope.vm.brand.title||$scope.vm.brand.title.length<3||$scope.vm.brand.title.length>30?$scope.vm.errorMsg="The title must be min 3 max 30 letters":""==$scope.vm.brand.description||null==$scope.vm.brand.description||void 0==$scope.vm.brand.description?$scope.vm.errorMsg="Description is required":$scope.vm.brand.description.length<3||$scope.vm.brand.description.length>1e3?$scope.vm.errorMsg="Description must be min 3 max 1000 letters.":($scope.displaySpinner=!0,void Brands.addNew($scope.vm.brand).then(function(response){$scope.vm.brand.title="",$scope.vm.brand.description="",$scope.vm.successMsg=response.data.title+" added successfully."},function(err){$scope.vm.errorMsg=err.data.message?err.data.message:err.data.msg})["finally"](function(){$scope.displaySpinner=!1}))},$scope.disposeModal=function(){$uibModalStack.dismissAll()}}]);
I am getting error for ui.bootstrap modules, angular.min.js:123
Error:
[$injector:unpr]
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24uibModalStackProvider%20%3C-%20%24uibModalStack%20%3C-%20InvoiceCtrl%20%3C-%20BrandsCtrl
I have already used gulp-ng-annotate,.pipe(uglify({mangle:false})) in mu gulpfile.js. Please suggest where it is breaking my app for $uibModal and why?
angular version - AngularJS v1.6.4
Node
It seems that you should add dependency on ui.bootstrap module:
angular.module("sbApp", ["ui.bootstrap"])...
It was duplicate files present and concat was actually adding same file twice
I am using Babel 6 for es2015 and react I have added the presets property in .babelrc but while running gulp in my project I am getting the following error.
ReferenceError: [BABEL] C:\sunny\ubuntushare\projects\viewpoint_ui\src\javascript\app-nyi.jsx: Unknown option: C:\sunny\ubuntushare\projects\viewpoint_ui\.babelrc.presets while parsing file: C:\sunny\ubuntushare\projects\viewpoint_ui\src\javascript\app-nyi.jsx
at Logger.error (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at Babelify._flush (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\index.js:28:24)
at Babelify.<anonymous> (_stream_transform.js:118:12)
My .babelrc file is
{
"presets": ["react","stage-0","es2015"]
}
If I run babel src -d lib command, it works. But if I run gulp build for building the error appears.
The gulpfile is as follows
'use strict';
var _ = require('lodash');
var gulp = require('gulp');
var webserver = require('gulp-webserver');
var browserify = require('browserify');
var babelify = require('babelify');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var sass = require('gulp-sass');
var swig = require('gulp-swig');
var rename = require("gulp-rename");
var nodeResolve = require('resolve');
var source = require('vinyl-source-stream');
var del = require('del');
var buffer = require('gulp-buffer');
var concat = require('concat-stream');
var file = require('gulp-file');
var eslint = require('gulp-eslint');
var concatCss = require('gulp-concat-css');
var production = (process.env.NODE_ENV === 'production');
function getNPMPackageIds() {
// read package.json and get dependencies' package ids
var packageManifest = {};
try {
packageManifest = require('./package.json');
} catch (e) {
// does not have a package.json manifest
}
return _.keys(packageManifest.dependencies) || [];
}
gulp.task('lint', function () {
return gulp.src(['./src/javascript/components/**/*.jsx','./src/javascript/actions/*.jsx','./src/javascript/stores/*.jsx','./src/javascript/utilities/*.js'])
// eslint() attaches the lint output to the eslint property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failOnError last.
//.pipe(eslint.failOnError());
});
gulp.task('templates', ['clean'], function () {
gulp.src('./src/htdocs/**/*.html')
.pipe(swig())
.pipe(gulp.dest('./build/'));
});
gulp.task('server', function () {
gulp.src('./build')
.pipe(webserver({
host: '0.0.0.0',
port: 8080,
// fallback: 'index.html',
livereload: true,
proxies: [{
source: '/ui',
target: 'http://localhost:8080/'
}]
}));
});
gulp.task('sass', ['clean'], function () {
var css = gulp.src('./src/sass/**/*.scss')
.pipe(sass().on('error', sass.logError));
if (production) { css = css.pipe(minify()); }
css.pipe(gulp.dest('./build/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./src/sass/**/*.scss', ['sass']);
});
// main build task
gulp.task('build', ['build-vendor', 'build-app', 'uikit', 'sass', 'templates', 'copyfiles']);
gulp.task('build-vendor', function () {
var b = browserify({
// generate source maps in non-production environment
debug: !production
});
// do the similar thing, but for npm-managed modules.
// resolve path using 'resolve' module
getNPMPackageIds().forEach(function (id) {
b.require(nodeResolve.sync(id), { expose: id });
});
var stream = b.bundle().pipe(source('vendor.js'))
.pipe(buffer())
.pipe(gulp.dest('./build'));
if (production) {
stream = stream.pipe(uglify())
.pipe(gulp.dest('./build'));
}
return stream;
});
function write(name) {
return concat(function (content) {
// create new vinyl file from content and use the basename of the
// filepath in scope as its basename.
var f = file(name, content, { src: true });
// uglify content
if (production) {
f = f.pipe(uglify());
}
// write content to build directory
f.pipe(gulp.dest('./'));
return f;
});
}
gulp.task('build-app', function () {
var files = ['src/javascript/app.jsx', 'src/javascript/app-2f.jsx', 'src/javascript/app-nyi.jsx'];
var b = browserify(files, {
extensions: ['.jsx'],
debug: !production
});
// exclude all NPM modules
getNPMPackageIds().forEach(function (id) {
b.external(id);
});
b.plugin('factor-bundle', {
outputs: [
write('build/app.js'),
write('build/app-2f.js'),
write('build/app-nyi.js')
]
});
var stream = b.transform(babelify, {presets: ["react","stage-0","es2015"]}).bundle()
.pipe(source('common.js'))
.pipe(buffer())
.pipe(gulp.dest('./build/'));
if (production) {
stream = stream.pipe(uglify())
.pipe(gulp.dest('./build'));
}
return stream;
});
gulp.task('clean', function (cb) {
del([
'build/**/*.*'
], cb);
});
gulp.task('uikit', ['clean'], function () {
gulp.src([(production ? './node_modules/': '../') + 'osstools_uikit/assets/css/screen.css', './node_modules/react-widgets/dist/css/react-widgets.css', './node_modules/rc-slider/assets/index.css', './node_modules/react-bootstrap-table/css/react-bootstrap-table-all.css'])
.pipe(concatCss('osstools_uikit.css', {rebaseUrls:false}))
.pipe(gulp.dest('./build/css'));
});
gulp.task('copyfiles', ['clean'], function () {
gulp.src((production ? './node_modules/' : '../') + 'osstools_uikit/assets/images/**/*')
.pipe(gulp.dest('./build/css/images/'));
gulp.src(['./node_modules/react-widgets/dist/fonts/*', (production ? './node_modules/' : '../') + 'osstools_uikit/assets/fonts/**/*'])
.pipe(gulp.dest('./build/fonts/'));
});
gulp.task('watch', ['build-vendor', 'build-app', 'uikit', 'sass', 'templates', 'copyfiles'], function () {
gulp.watch('./src/javascript/components/**/*.jsx', ['build']);
gulp.watch('./src/javascript/stores/*.jsx', ['build']);
gulp.watch('./src/javascript/actions/*.jsx', ['build']);
gulp.watch('./src/javascript/utilities/*.js', ['build']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
gulp.watch('./src/htdocs/**/*.html', ['templates']);
});
gulp.task('default', ['build', 'server', 'watch']);
We have some code in Angular JS which is build using gulp (babel).
We have necessity to redirect the api service calls to a different server.
Hence, which development we run gulp server and with that add the api-host server in the proxy argument while running gulp server, as follows:
gulp serve:dist --mock no --proxy http://<host-name>:8090
Now, after development, we build and distribute the same bundle to different host (not the same host where the api services are hosted). Now we are not able to connect to the api server. The command we use to build is
gulp build:dist --mock no
Even if we add the proxy argument here, it doesn't works.
gulp build:dist --mock no --proxy http://<host-name>:8090
We tried customizing the "gulpfile.babel.js" file. but no result.
The following is the "gulpfile.babel.js" used:
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var runSequence = require('run-sequence');
var del = require('del');
var _ = require('lodash');
var historyApiFallback = require('connect-history-api-fallback');
var path = require('path');
var args = require('yargs').argv;
var proxyMiddleware = require('http-proxy-middleware');
var merge = require('merge-stream');
// browserSync
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// config & testing
var config = require('./build/build.config.js');
var protractorConfig = require('./build/protractor.config.js');
var karmaConfig = require('./build/karma.config.js');
var KarmaServer = require('karma').Server;
var pkg = require('./package');
/* jshint camelcase:false*/
var webdriverStandalone = require('gulp-protractor').webdriver_standalone;
var webdriverUpdate = require('gulp-protractor').webdriver_update;
//update webdriver if necessary, this task will be used by e2e task
gulp.task('webdriver:update', webdriverUpdate);
// util functions
function sortModulesFirst(a, b) {
var module = /\.module\.js$/;
var aMod = module.test(a.path);
var bMod = module.test(b.path);
// inject *.module.js first
if (aMod === bMod) {
// either both modules or both non-modules, so just sort normally
if (a.path < b.path) {
return -1;
}
if (a.path > b.path) {
return 1;
}
return 0;
} else {
return (aMod ? -1 : 1);
}
}
// serve app in dev mode or prod mode
function serverOptions(logPrefix) {
var proxy = args.proxy;
var options = {
notify: false,
logPrefix: pkg.name,
server: {
baseDir: ['build', 'client']
}
};
// use a proxy server to serve '/api/**'' and '/auth' routes
if (proxy && args.mock === 'no') {
options.server.middleware = [
proxyMiddleware(['/auth', '/api'], {
target: proxy
}),
historyApiFallback()
];
} else {
// use Angular's $httpBackend as the server
options.server.middleware = [
historyApiFallback()
];
}
if (logPrefix) {
options.logPrefix = pkg.name;
}
return options;
}
// run unit tests and watch files
gulp.task('tdd', function(cb) {
new KarmaServer(_.assign({}, karmaConfig, {
singleRun: false,
action: 'watch',
browsers: ['PhantomJS']
}), cb).start();
});
// run unit tests with travis CI
gulp.task('travis', ['build'], function(cb) {
new KarmaServer(_.assign({}, karmaConfig, {
singleRun: true,
browsers: ['PhantomJS']
}), cb).start();
});
// optimize images and put them in the dist folder
gulp.task('images', function() {
return gulp.src(config.images, {
base: config.base
})
.pipe($.imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest(config.dist))
.pipe($.size({
title: 'images'
}));
});
//generate angular templates using html2js
gulp.task('templates', function() {
return gulp.src(config.tpl)
.pipe($.changed(config.tmp))
.pipe($.html2js({
outputModuleName: 'templates',
base: 'client',
useStrict: true
}))
.pipe($.concat('templates.js'))
.pipe(gulp.dest(config.tmp))
.pipe($.size({
title: 'templates'
}));
});
//generate css files from scss sources
gulp.task('sass', function() {
return gulp.src(config.mainScss)
.pipe($.sass())
.pipe($.autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.on('error', $.sass.logError)
.pipe(gulp.dest(config.tmp))
.pipe($.size({
title: 'sass'
}));
});
//generate a minified css files, 2 js file, change theirs name to be unique, and generate sourcemaps
gulp.task('html', function() {
let useminConfig = {
path: '{build,client}',
css: [$.csso(), $.rev()],
vendorJs: [$.uglify({
mangle: false
}), $.rev()],
mainJs: [$.ngAnnotate(), $.uglify({
mangle: false
}), $.rev()]
};
if (args.mock === 'no') {
// Don't include mock vendor js
useminConfig.mockVendorJs = [];
return gulp.src(config.index)
.pipe($.usemin(useminConfig))
.pipe($.replace('<script src="assets/js/mock-vendor.js"></script>', ''))
.pipe(gulp.dest(config.dist))
.pipe($.size({
title: 'html'
}));
} else {
// Include mock vendor js
useminConfig.mockVendorJs = [$.uglify({
mangle: false
}), $.rev()];
return gulp.src(config.index)
.pipe($.usemin(useminConfig))
.pipe(gulp.dest(config.dist))
.pipe($.size({
title: 'html'
}));
}
});
// clean up mock vendor js
gulp.task('clean:mock', function(cb) {
if (args.mock === 'no') {
let paths = [path.join(config.dist, 'assets/js/mock-vendor.js')];
del(paths).then(() => {
cb();
});
} else {
cb();
}
});
//copy assets in dist folder
gulp.task('copy:assets', function() {
return gulp.src(config.assets, {
dot: true,
base: config.base
})
//.pipe(gulp.dest(config.dist + '/assets'))
.pipe(gulp.dest(config.dist))
.pipe($.size({
title: 'copy:assets'
}));
});
//copy assets in dist folder
gulp.task('copy', function() {
return gulp.src([
config.base + '/*',
'!' + config.base + '/*.html',
'!' + config.base + '/src',
'!' + config.base + '/test',
'!' + config.base + '/bower_components'
])
.pipe(gulp.dest(config.dist))
.pipe($.size({
title: 'copy'
}));
});
//clean temporary directories
gulp.task('clean', del.bind(null, [config.dist, config.tmp]));
//lint files
gulp.task('jshint', function() {
return gulp.src(config.js)
.pipe(reload({
stream: true,
once: true
}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
// babel
gulp.task('transpile', function() {
return gulp.src(config.js)
.pipe($.sourcemaps.init())
.pipe($.babel({
presets: ['es2015']
}))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(
path.join(config.tmp, 'src')
));
});
// inject js
gulp.task('inject:js', () => {
var injectJs = args.mock === 'no' ?
config.injectJs :
config.injectJs.concat(config.mockJS);
return gulp.src(config.index)
.pipe($.inject(
gulp
.src(injectJs, {
read: false
})
.pipe($.sort(sortModulesFirst)), {
starttag: '<!-- injector:js -->',
endtag: '<!-- endinjector -->',
transform: (filepath) => '<script src="' + filepath.replace('/client', 'tmp') + '"></script>'
}))
.pipe(gulp.dest(config.base));
});
/** ===================================
build tasks
======================================*/
//build files for development
gulp.task('build', ['clean'], function(cb) {
runSequence(['sass', 'templates', 'transpile', 'inject:js'], cb);
});
//build files for creating a dist release
gulp.task('build:dist', ['clean'], function(cb) {
//runSequence(['jshint', 'build', 'copy', 'copy:assets', 'images', 'test:unit'], 'html', cb);
runSequence(['jshint', 'build', 'copy', 'copy:assets', 'images'], 'html', 'clean:mock', cb);
});
// For aniden internal usage
// changed app root for labs server
gulp.task('labs:aniden', function() {
let base = `/hpe/mvno_portal/build/v${pkg.version}/`;
let html = gulp.src(config.dist + '/index.html', {
base: config.dist
})
.pipe($.replace('<base href="/">', `<base href="${base}">`))
.pipe(gulp.dest(config.dist));
let css = gulp.src(config.dist + '/**/*.css', {
base: config.dist
})
.pipe($.replace('url(/', `url(${base}`))
.pipe($.replace('url("/', `url("${base}`))
.pipe(gulp.dest(config.dist));
let js = gulp.src(config.dist + '/**/*.js', {
base: config.dist
})
.pipe($.replace('href="/"', `href="${base}"`))
.pipe(gulp.dest(config.dist));
return merge(html, css, js);
});
/** ===================================
tasks supposed to be public
======================================*/
//default task
gulp.task('default', ['serve']); //
//run unit tests and exit
gulp.task('test:unit', ['build'], function(cb) {
new KarmaServer(_.assign({}, karmaConfig, {
singleRun: true
}), cb).start();
});
// Run e2e tests using protractor, make sure serve task is running.
gulp.task('test:e2e', ['webdriver:update'], function() {
return gulp.src(protractorConfig.config.specs)
.pipe($.protractor.protractor({
configFile: 'build/protractor.config.js'
}))
.on('error', function(e) {
throw e;
});
});
//run the server, watch for file changes and redo tests.
gulp.task('serve:tdd', function(cb) {
runSequence(['serve', 'tdd'], cb);
});
//run the server after having built generated files, and watch for changes
gulp.task('serve', ['build'], function() {
browserSync(serverOptions());
gulp.watch(config.html, reload);
gulp.watch(config.scss, ['sass', reload]);
gulp.watch(config.js, ['jshint', 'transpile']);
gulp.watch(config.tpl, ['templates', reload]);
gulp.watch(config.assets, reload);
});
//run the app packed in the dist folder
gulp.task('serve:dist', ['build:dist'], function() {
browserSync(serverOptions());
});
You can use gulp-ng-config to add constant in you app module.
Or you a JSON as a config file inside your gulp:
//Gulp file
var fs = require('fs');
var settings = JSON.parse(fs.readFileSync('./config/config.json', 'utf8'));
....
gulp.task('statics', g.serve({
port: settings.frontend.ports.development,
...
}));
gulp.task('production', g.serve({
port: settings.frontend.ports.production,
root: ['./dist'],
...
}));