I am updating to gulp4 from 3.9.1 on an old project. Due to the upgrade I've had to rewrite the tasks as per the documentation. I've switched to name functions and I am using gulp.series but I am getting errors such as:
AssertionError [ERR_ASSERTION]: Task never defined: mobile_styles
Below is my gulp file. It consists mostly of watch scripts for two languages on desktop and mobile
var fontName = "project-icons",
gulp = require("gulp"),
sass = require("gulp-sass"),
sourcemaps = require("gulp-sourcemaps"),
iconfont = require("gulp-iconfont"),
iconfontCss = require("gulp-iconfont-css");
var sassOptions = {
errLogToConsole: true,
outputStyle: "expanded"
};
function iconfont(done) {
gulp.src(["./icons/*.svg"])
.pipe(
iconfontCss({
fontName: fontName,
path: "sass",
targetPath: "../sass/static/icons/_icons.sass",
fontPath: "./fonts/",
cssClass: "icon"
})
)
.pipe(
iconfont({
formats: ["ttf", "eot", "woff", "woff2", "svg"],
fontName: fontName,
normalize: true,
fixedWidth: true,
centerHorizontally: true
})
)
.on("glyphs", function(glyphs, options) {})
.pipe(gulp.dest("./fonts/"));
done();
}
function desktop_styles() {
return gulp
.src("./sass/_en/style.sass")
.pipe(
sourcemaps.init({
loadMaps: true,
identityMap: true,
sourceRoot: "../css/"
})
)
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./css/"));
}
function desktop_styles_rtl() {
return gulp
.src("./sass/_ar/style.sass")
.pipe(
sourcemaps.init({
loadMaps: true,
identityMap: true,
sourceRoot: "../css/"
})
)
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./css/lang/rtl"));
}
function mobile_styles() {
return gulp
.src("./sass/en/mobile/style.sass")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css/m"));
}
function mobile_styles_rtl() {
return gulp
.src("./sass/rtl/m/style.sass")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css/lang/rtl/m"));
}
gulp.task(
"watch:all",
gulp.series(
"mobile_styles",
"mobile_styles_rtl",
"desktop_styles",
"desktop_styles_rtl",
function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
}
)
);
gulp.task(
"watch:AllDesktop",
gulp.series("desktop_styles", "desktop_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
})
);
gulp.task(
"watch:desktop_styles_rtl",
gulp.series("desktop_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["desktop_styles_rtl"]);
})
);
gulp.task(
"watch:desktop_en",
gulp.series("desktop_styles", function() {
gulp.watch("./sass/**/*.sass", ["desktop_styles"]);
})
);
gulp.task(
"watch:mobile_rtl",
gulp.series("mobile_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
})
);
gulp.task(
"watch:mobile_en",
gulp.series("mobile_styles", function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
})
);
gulp.task(
"watch:AllMobile",
gulp.series("mobile_styles", "mobile_styles_rtl", function() {
gulp.watch("./sass/**/*.sass", ["mobile_styles"]);
gulp.watch("./sass/**/*.sass", ["mobile_styles_rtl"]);
})
);
Can someone help me with troubleshooting this? Should I switch to gulp.parallels for the tasks or am I refactoring this the wrong way?
All of your watches should be of the form:
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles)
So, for example, change to:
gulp.task(
"watch:all",
gulp.series(
mobile_styles,
mobile_styles_rtl,
desktop_styles,
desktop_styles_rtl,
function(done) {
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
done();
}
)
);
Note that when referring to named functions they are not enclosed in quotes (as a task created with gulp.task would be). And I added the done to signal when that task has completed which will be important.
You have to change much of your code to this form. And your gulp.task calls could be converted to named functions as well. So the beginning of the above code could be:
function watch_all() {
gulp.series(….
[can't use the : in a function name though.]
Related
Error:
No "exportPathMap" found in "next.config.js". Generating map from "./pages"
But I do have exportPathMap based on the official docs:
my next.config.js contains:
const withCss = require("#zeit/next-css");
const withSass = require("#zeit/next-sass");
const withTM = require("next-transpile-modules");
module.exports = {
exportPathMap: async function(
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
"/": { page: "/" },
"/menu": { page: "/menu" },
"/about": { page: "/about" }
};
}
};
module.exports = withCss({
cssModules: true
});
module.exports = withSass(
withTM({
transpileModules: ["react-bulma-components"],
sassLoaderOptions: {
includePaths: ["./components"]
}
})
);
I have also tried removing the default mappings:
module.exports = {
exportPathMap: async function() {
return {
"/": { page: "/" },
"/menu": { page: "/menu" },
"/about": { page: "/about" }
};
}
};
As well as moving it inside the withCss() based on my research:
module.exports = withCss({
exportPathMap: async function() {
return {
"/": { page: "/" },
"/menu": { page: "/menu" },
"/about": { page: "/about" }
};
}
});
The two exports withSass() and withCss() seems to be working though,
what did I do wrong?
EDIT:
My next.config.js is in the root project directory, if you're by any chance wondering.
You are re-assigning your module.exports multiple times, so the exportPathMap and withCss get missing. The config, in this case, should look like this:
module.exports = withCss(
withSass(
withTM({
transpileModules: ["react-bulma-components"],
sassLoaderOptions: {
includePaths: ["./components"]
},
exportPathMap: async function(
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
"/": { page: "/" },
"/menu": { page: "/menu" },
"/about": { page: "/about" }
};
}
})
)
);
exportPathMap is currently discouraged by next.js contributors. Please have a look at https://github.com/zeit/next.js/issues/10983#issuecomment-611147932
Otherwise the correct answer is
module.exports = withCss(
withSass(
withTM({
transpileModules: ["react-bulma-components"],
sassLoaderOptions: {
includePaths: ["./components"]
},
exportPathMap: async function(
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
"/": { page: "/" },
"/menu": { page: "/menu" },
"/about": { page: "/about" }
};
}
})
)
);
module.exports = withCss(withSass(
withTM({
transpileModules: ["react-bulma-components"],
sassLoaderOptions: {
includePaths: ["./components"]
},
cssModules: true,
exportPathMap: async function(
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
"/": { page: "/" },
"/menu": { page: "/menu" },
"/about": { page: "/about" }
};
}
})
));
I want to call 'proDirection' function twice inside 'proCompiler' function to get rtl.css and ltr.css files.
gulp.task('proDirection', function(rtl = 'true') {
var fileName;
rtl == 'false' ? fileName = 'ltr-style.css' : fileName = 'rtl-style.css';
return gulp.src(srcMainStyleFilePath)
.pipe(header('$rtl:'+ rtl + ';\n'))
.pipe(sass({
includePaths: ['node_modules']
}).on('error', sass.logError))
.pipe(cssnano({
autoprefixer: {browsers: supported, add: true}
}))
.pipe(rename(fileName))
.pipe(gulp.dest(distPath));
});
gulp.task('proCompiler', function() {
//proDirection();
//proDirection(false);
});
Something like this?
gulp.task('proDirection', proDirection);
gulp.task('proCompiler', function(done) {
proDirection();
proDirection('false');
done();
});
function proDirection(rtl = 'true') {
var fileName;
rtl == 'false' ? fileName = 'ltr-style.css' : fileName = 'rtl-style.css';
return gulp.src(srcMainStyleFilePath)
.pipe(header('$rtl:'+ rtl + ';\n'))
.pipe(sass({
includePaths: ['node_modules']
}).on('error', sass.logError))
.pipe(cssnano({
autoprefixer: {browsers: supported, add: true}
}))
.pipe(rename(fileName))
.pipe(gulp.dest(distPath));
}
I am trying to use KendoUI datetimepicker in my angular(1.x) project. When I directly reference the KendoUI js file in my index.html page, it works fine. But when i try to add a reference to it via gulp, it keeps on throwing the following error:
Uncaught ReferenceError: module is not defined at kendo.ui.core.js:1
In my package.json, I have
"kendo-ui-core": "2017.2.621"
And this is what i have in my gulp file:
/// <reference path="node_modules/moment/moment.js" />
/// <reference path="node_modules/moment/src/moment.js" />
/// <binding BeforeBuild='clean' AfterBuild='build' Clean='clean' />
var gulp = require("gulp"),
rimraf = require("rimraf"),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
concat = require("gulp-concat-sourcemap"),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
ignore = require('gulp-ignore'),
cacheBuster = require('gulp-cache-bust'),
templateCache = require('gulp-angular-templatecache');
var paths = {
webroot: "./build/",
approot: "./app/"
};
paths.fonts = "./fonts/**/*";
paths.less = "./less/**/*.less";
paths.images = "./images/**/*";
paths.js = paths.approot + "**/*.js";
paths.specs = paths.approot + "**/*.spec.js";
paths.views = paths.approot + "**/*.html";
gulp.task("clean", function (cb) {
rimraf(paths.webroot, cb);
});
gulp.task('jshint', function () {
return gulp.src(paths.js)
.pipe(ignore.exclude('*.spec.js'))
.pipe(jshint('jshint.config.json'))
.pipe(jshint.reporter('gulp-jshint-file-reporter', {
filename: __dirname + '/jshint-output.log'
}));
//.pipe(jshint.reporter("fail")); // Throw error and fail build
});
gulp.task("build:js", function () {
return gulp.src([
paths.approot + "**/*.module.js",
paths.approot + "**/*.config.js",
paths.js,
"!" + paths.specs
])
.pipe(concat('app.js', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "app/"));
});
gulp.task("build:views", function () {
return gulp.src([paths.views])
.pipe(templateCache({ root: "app", module: "goalEnvision" }))
.pipe(gulp.dest(paths.webroot + "app/"));
});
gulp.task("build:fonts", function () {
return gulp.src([
paths.fonts,
'node_modules/bootstrap/dist/fonts/*',
'node_modules/bootstrap-less/fonts/*'
])
.pipe(gulp.dest(paths.webroot + "fonts/"));
});
gulp.task("build:less", function () {
return gulp.src(["./less/**/app.less"]) //compile app + theme less files
.pipe(less({
paths: [
'.',
'node_modules/angucomplete-alt/angucomplete-alt.css'
//'./node_modules/bootstrap-less',
]
}))
.pipe(gulp.dest(paths.webroot + "css/"));
});
gulp.task("build:images", function () {
return gulp.src([paths.images])
.pipe(gulp.dest(paths.webroot + "images/"));
});
gulp.task("build:index.html", function () {
return gulp.src("index.html")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build:favicon.ico", function () {
return gulp.src("favicon.ico")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build:cache-bust", ["build:index.html", "build:js", "build:less", "build:libs.js", "build:libs.css"], function () {
return gulp.src(paths.webroot + "index.html")
.pipe(cacheBuster())
.pipe(gulp.dest(paths.webroot));
});
gulp.task('build:libs.js', function () {
gulp.src([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/angular/angular.min.js',
'node_modules/angular-dynamic-locale/dist/tmhDynamicLocale.min.js',
'node_modules/angular-xeditable/dist/js/xeditable.min.js',
'node_modules/angular-file-upload/dist/angular-file-upload.min.js',
'node_modules/angular-loading-bar/build/loading-bar.min.js',
'node_modules/ng-img-crop/compile/minified/ng-img-crop.js',
'node_modules/angular-ui-router/release/angular-ui-router.min.js',
'node_modules/angular-local-storage/dist/angular-local-storage.min.js',
'node_modules/highcharts/highcharts.js',
'node_modules/highcharts-ng/dist/highcharts-ng.min.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
'node_modules/angular-translate/dist/angular-translate.min.js',
'node_modules/angular-animate/angular-animate.min.js',
'node_modules/angular-toastr/dist/angular-toastr.min.js',
'node_modules/angular-toastr/dist/angular-toastr.tpls.min.js',
'node_modules/jquery-ui-dist/jquery-ui.min.js',
'node_modules/angular-ui-sortable/dist/sortable.min.js',
'node_modules/angular-touch/angular-touch.js',
'node_modules/sweetalert/dist/sweetalert.min.js',
'node_modules/angular-sweetalert/SweetAlert.min.js',
'node_modules/moment/min/moment.min.js',
'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js',
'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js',
'node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js',
//inkluderas i common/components/guide behövde ändra i källkoden för att disabla automatisk scrolling
//'node_modules/angular-tour/dist/angular-tour-tpls.js',
'node_modules/angular-moment/angular-moment.min.js',
'node_modules/angular-sanitize/angular-sanitize.js',
'node_modules/angular-bootstrap-confirm/dist/angular-bootstrap-confirm.js',
'node_modules/angular-hotkeys/build/hotkeys.min.js',
'node_modules/angucomplete-alt/dist/angucomplete-alt.min.js',
'node_modules/angular-sticky-plugin/dist/angular-sticky.min.js',
'node_modules/kendo-ui-core/js/kendo.ui.core.js',
//Tried with different permutation/combination of these files as well
//'node_modules/kendo-ui-core/js/kendo.core.js',
//'node_modules/kendo-ui-core/js/kendo.popup.js',
//'node_modules/kendo-ui-core/js/kendo.calendar.js',
//'node_modules/kendo-ui-core/js/kendo.datepicker.js',
//'node_modules/kendo-ui-core/js/kendo.timepicker.js',
//'node_modules/kendo-ui-core/js/kendo.datetimepicker.js',
//'node_modules/kendo-ui-core/js/kendo.angular.js',
])
.pipe(concat('libs.js', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "/libs"));
});
gulp.task('build:libs.css', function () {
gulp.src([
'node_modules/angular-toastr/dist/angular-toastr.css',
'node_modules/sweetalert/dist/sweetalert.css',
'node_modules/angular-bootstrap-datetimepicker/src/css/datetimepicker.css',
'node_modules/angular-xeditable/dist/css/xeditable.css',
'node_modules/ng-img-crop/compile/minified/ng-img-crop.css',
'node_modules/angular-loading-bar/build/loading-bar.css',
'node_modules/bootstrap-toggle/css/bootstrap-toggle.css',
'node_modules/angular-tour/dist/angular-tour.css'
])
.pipe(concat('libs.css', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "/libs"));
});
gulp.task("build:webconfig", function () {
return gulp.src("Web.config")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build", ["jshint", "build:js", "build:less", "build:fonts", "build:images", "build:libs.js", "build:libs.css", "build:views", "build:index.html", "build:favicon.ico", "build:cache-bust", "build:webconfig"]);
gulp.task('watchAndBuild', function () {
gulp.watch(paths.js, ['build']);
gulp.watch(paths.views, ['build']);
});
The exact line where it throws error relates to
I think I am not including the kendoui files in the correct manner. What changes do I need to get it working?
The only way I was able to solve this error was by including a direct reference to the kendo ui js file in the index.html. Hope it will help others.
i'm followed by dud from tutorial, and now have some issue,
Routing is not work, and when i run gulp, i have and error from 'gulp-eslint' in terminal:
/home/im/Project/react/psadmin/src/main.js
7:13 error Unexpected token =
/home/im/Project/react/psadmin/src/components/homePage.js
6:13 error Unexpected token =
/home/im/Project/react/psadmin/src/components/about/aboutPage.js
6:13 error Unexpected token =
this is my files:
"use strict"
var gulp = require('gulp')
var connect = require('gulp-connect') // Runs a local dev server
var open = require('gulp-open') // Open a URL in a web browser
var browserify = require('browserify') // Bundle JS
var reactify = require('reactify') // Transform React JSX to JS
var source = require('vinyl-source-stream') // Use convertional text streams with Gulp
var concat = require('gulp-concat') // Concatenates files
var lint = require('gulp-eslin') // Lint JS files, including JSX
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/*.js',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css'
],
dist: './dist',
mainJs: './src/main.js'
}
}
// Start a local development server
gulp.task('connect', () => {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
})
})
gulp.task('open', ['connect'], () => {
gulp.src('dist/index.html')
.pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/'}))
})
gulp.task('html', () => {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload())
})
gulp.task('js', () => {
browserify(config.paths.mainJs)
.transform(reactify)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload())
})
gulp.task('css', () => {
gulp.src(config.paths.css)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'))
})
gulp.task('lint', () => {
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format())
})
gulp.task('watch', () => {
gulp.watch(config.paths.html, ['html'])
gulp.watch(config.paths.js, ['js', 'lint'])
gulp.watch(config.paths.css, ['css'])
})
gulp.task('default', ['html', 'js', 'lint', 'css', 'open', 'watch'])
main.js
$ = jQuery = require('jquery')
var React = require('react')
var Home = require('./components/homePage')
var About = require('./components/about/aboutPage')
var App = React.createClass({
render: () => {
var Child
switch(this.props.route) {
case 'about':
Child = About
break
default:
Child = Home
}
return (
<div>
<Child />
</div>
)
}
})
function render() {
var route = window.location.hash.substr(1)
React.render(<App route={route} />, document.getElementById('app'))
}
window.addEventListener('hashchange', render)
render()
homePage.js
"use strict"
var React = require('react')
var Home = React.createClass({
render: () => {
return (
<div className="jumbotron">
<h1>Pluralsight Administration</h1>
<p>React, React Router, and Flux for ultra-responsive web apps.</p>
</div>
)
}
})
module.exports = Home
aboutPage.js
"use strict"
var React = require('react')
var About = React.createClass({
render: () => {
return (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
}
})
module.exports = About
eslint.conf.json
{
"root": true,
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"jquery": true
},
"rules": {
"quotes": 0,
"no-trailing-spaces": 0,
"eol-last": 0,
"no-unused-vars": 0,
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0
},
"globals": {
"jQuery": true,
"$": true
}
}
Link to full application where i'm stoped is here on git
here
Link to current tutorial here
You are off a little on your implementation
With React Create class you need to do the following
var About = React.createClass({
render: function() {
return (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
}
})
Or you can use the ES6 syntax
class About extends React.Component {
render() {
return (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
}
}
Or you can use the ES6 arrow syntax
const About = () => (
<div>
<h1>About</h1>
<p>
This application uses the following technologies:
<ul>
<li>React</li>
<li>React Router</li>
<li>Flux</li>
<li>Node</li>
<li>Gulp</li>
<li>Browserify</li>
<li>Bootstrap</li>
</lu>
</div>
)
Your syntax is wrong.
replace render: () => {
by
render() { return (...) }
or if your project does not support ES6:
render: function(){return ...}
and tell me if that fixes the problem
I'm following this tutorial on using angularjs alongside laravel: http://angular-tips.com/blog/2014/11/working-with-laravel-plus-angular-part-2/. However, if I define a route in config.routes.js which points to a controller, any controller, my app crashes. In the console the error "Error: too much recursion" comes up, along with a useless stack trace.
All my files are exactly the same as in the tutorial, I only changed the name of the route and the controller, but that shouldn't make a difference.
I googled around a bit and it seems this error might be caused by using a wrong version of jquery. I use angularjs 1.3.0 and I have no idea which jquery version my app is using, but I used npm install angular, so it'd be weird if that installed a wrong version, right?
I'm completely lost on why this happens and also very frustrated, so any help would be greatly appreciated.
Thanks.
EDIT: Added code:
app/js/config.routes.js
angular.module('app').config(function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider.when('/transactions',
{
templateUrl: 'features/transactions/transactions.tpl.html',
controller: 'Transactions'
});
});
app/js/transactions/transactions.js:
angular.module('app').controller('Transactions', function($scope, $http)
{
$http.get('/api/transactions').then(function(result)
{
$scope.shows = result.data;
});
});
transactions.tpl.html is empty.
app.js:
angular.module('app', ['ngRoute']);
EDIT 2: added gulp.js
The only thing I changed here is, is that I added the 'webserver' task.
var gulp = require('gulp');
var fs = require('fs');
var plugins = require('gulp-load-plugins')();
var es = require('event-stream');
var del = require('del');
var publicFolderPath = '../public';
var paths = {
appJavascript: ['app/js/app.js', 'app/js/**/*.js'],
appTemplates: 'app/js/**/*.tpl.html',
appMainSass: 'app/scss/main.scss',
appStyles: 'app/scss/**/*.scss',
appImages: 'app/images/**/*',
indexHtml: 'app/index.html',
vendorJavascript: ['vendor/js/angular.js', 'vendor/js/**/*.js'],
vendorCss: ['vendor/css/**/*.css'],
finalAppJsPath: '/js/app.js',
finalAppCssPath: '/css/app.css',
specFolder: ['spec/**/*_spec.js'],
publicFolder: publicFolderPath,
publicJavascript: publicFolderPath + '/js',
publicAppJs: publicFolderPath + '/js/app.js',
publicCss: publicFolderPath + '/css',
publicImages: publicFolderPath + '/images',
publicIndex: publicFolderPath + '/angular.html',
publicJsManifest: publicFolderPath + '/js/rev-manifest.json',
publicCssManifest: publicFolderPath + '/css/rev-manifest.json'
};
gulp.task('scripts-dev', function() {
return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
.pipe(plugins.if(/html$/, buildTemplates()))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.concat('app.js'))
.pipe(plugins.sourcemaps.write('.'))
.pipe(gulp.dest(paths.publicJavascript));
});
gulp.task('scripts-prod', function() {
return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
.pipe(plugins.if(/html$/, buildTemplates()))
.pipe(plugins.concat('app.js'))
.pipe(plugins.ngAnnotate())
.pipe(plugins.uglify())
.pipe(plugins.rev())
.pipe(gulp.dest(paths.publicJavascript))
.pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
.pipe(gulp.dest(paths.publicJavascript));
});
gulp.task('styles-dev', function() {
return gulp.src(paths.vendorCss.concat(paths.appMainSass))
.pipe(plugins.if(/scss$/, plugins.sass()))
.pipe(plugins.concat('app.css'))
.pipe(gulp.dest(paths.publicCss));
});
gulp.task('styles-prod', function() {
return gulp.src(paths.vendorCss.concat(paths.appMainSass))
.pipe(plugins.if(/scss$/, plugins.sass()))
.pipe(plugins.concat('app.css'))
.pipe(plugins.minifyCss())
.pipe(plugins.rev())
.pipe(gulp.dest(paths.publicCss))
.pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
.pipe(gulp.dest(paths.publicCss));
});
gulp.task('images', function() {
return gulp.src(paths.appImages)
.pipe(gulp.dest(paths.publicImages));
});
gulp.task('indexHtml-dev', ['scripts-dev', 'styles-dev'], function() {
var manifest = {
js: paths.finalAppJsPath,
css: paths.finalAppCssPath
};
return gulp.src(paths.indexHtml)
.pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
.pipe(plugins.rename(paths.publicIndex))
.pipe(gulp.dest(paths.publicFolder));
});
gulp.task('indexHtml-prod', ['scripts-prod', 'styles-prod'], function() {
var jsManifest = JSON.parse(fs.readFileSync(paths.publicJsManifest, 'utf8'));
var cssManifest = JSON.parse(fs.readFileSync(paths.publicCssManifest, 'utf8'));
var manifest = {
js: '/js/' + jsManifest['app.js'],
css: '/css/' + cssManifest['app.css']
};
return gulp.src(paths.indexHtml)
.pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
.pipe(plugins.rename(paths.publicIndex))
.pipe(gulp.dest(paths.publicFolder));
});
gulp.task('lint', function() {
return gulp.src(paths.appJavascript.concat(paths.specFolder))
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('jshint-stylish'));
});
gulp.task('testem', function() {
return gulp.src(['']) // We don't need files, that is managed on testem.json
.pipe(plugins.testem({
configFile: 'testem.json'
}));
});
gulp.task('clean', function(cb) {
del([paths.publicJavascript, paths.publicImages, paths.publicCss, paths.publicIndex], {force: true}, cb);
});
gulp.task('watch', ['indexHtml-dev', 'images'], function() {
gulp.watch(paths.appJavascript, ['lint', 'scripts-dev']);
gulp.watch(paths.appTemplates, ['scripts-dev']);
gulp.watch(paths.vendorJavascript, ['scripts-dev']);
gulp.watch(paths.appImages, ['images-dev']);
gulp.watch(paths.specFolder, ['lint']);
gulp.watch(paths.indexHtml, ['indexHtml-dev']);
gulp.watch(paths.appStyles, ['styles-dev']);
gulp.watch(paths.vendorCss, ['styles-dev']);
});
gulp.task('webserver', ['indexHtml-dev', 'images-dev'], function() {
plugins.connect.server({
root: paths.tmpFolder,
port: 5000,
livereload: true,
middleware: function(connect, o) {
return [ (function() {
var url = require('url');
var proxy = require('proxy-middleware');
var options = url.parse('http://localhost:8000/api');
options.route = '/api';
return proxy(options);
})(), historyApiFallback ];
}
});
});
gulp.task('default', ['watch']);
gulp.task('production', ['scripts-prod', 'styles-prod', 'images', 'indexHtml-prod']);
function buildTemplates() {
return es.pipeline(
plugins.minifyHtml({
empty: true,
spare: true,
quotes: true
}),
plugins.angularTemplatecache({
module: 'app'
})
);
}