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 making a web app using yeoman and I'm stuck in creating a generator. The problem is that it won't copy files to the output folder.
Here's my code:
'use strict';
var fs = require('fs');
var path = require('path');
var yeoman = require('yeoman-generator');
var yosay = require('yosay');
var chalk = require('chalk');
var wiredep = require('wiredep');
module.exports=yeoman.extend({
scaffoldFolders: function(){
this.mkdir("app");
this.mkdir("app/css");
this.mkdir("app/sections");
this.mkdir("build");
},
initializing: function(){
this.pkg=require('../../package.json');
},
prompting: function() {
var done = this.async();
this.log(yosay(
'Welcome to the marvelous ' + chalk.red('generator-palmyra') + ' generator!'
));
var prompts = [{
type: 'checkbox',
name: 'mainframeworks',
message:'Would you like AngularJS or JQuery ?',
choices: [{
name: 'Angular',
value: 'includeAngular',
checked: true
}, {
name: 'JQuery',
value: 'includeJQuery',
checked: true
}]
},
{
type: 'checkbox',
name: 'features',
message:'What more front-end frameworks would you like ?',
choices: [{
name: 'Sass',
value: 'includeSass',
checked: true
}, {
name: 'Bootstrap',
value: 'includeBootstrap',
checked: true
}, {
name: 'Modernizr',
value: 'includeModernizr',
checked: true
}]
}
];
this.prompt(prompts, function (answers) {
var features = answers.features;
var mainframeworks = answers.mainframeworks;
var hasFeature = function (feat) {
return features.indexOf(feat) !== -1;
};
var hasMainframeworks = function (mainframework) {
return mainframeworks.indexOf(mainframework) !== -1;
};
// manually deal with the response, get back and store the results.
this.includeSass = hasFeature('includeSass');
this.includeBootstrap = hasFeature('includeBootstrap');
this.includeModernizr = hasFeature('includeModernizr');
this.includeAngular = hasMainframeworks('includeAngular');
this.includeJQuery = hasMainframeworks('includeJQuery');
done();
}.bind(this));
},
writing() {
gulpfile= function(){
this.fs.copy(
this.templatePath('gulpfile.js'),
this.destinationPath('gulpfile.js')
);
},
packageJSON= function () {
this.fs.copy(
this.templatePath('_package.json'),
this.destinationPath('package.json')
);
},
git= function () {
this.fs.copy(
this.templatePath('gitignore'),
this.destinationPath('.gitignore')
);
this.fs.copy(
this.templatePath('gitattributes'),
this.destinationPath('.gitattributes')
);
},
bower= function () {
var bower = {
name: this._.slugify(this.appname),
private: true,
dependencies: {}
};
if (this.includeBootstrap) {
var bs = 'bootstrap' + (this.includeSass ? '-sass' : '');
bower.dependencies[bs] = '~3.3.1';
}
if (this.includeModernizr) {
bower.dependencies.modernizr = '~2.8.1';
}
if (this.includeAngular) {
bower.dependencies.angular = '~1.3.15';
}
if (this.includeJQuery) {
bower.dependencies.jquery = '~2.1.1';
}
this.fs.copy(
this.templatePath('bowerrc'),
this.destinationPath('.bowerrc')
);
this.write('bower.json', JSON.stringify(bower, null, 2));
},
jshint= function () {
this.fs.copy(
this.templatePath('jshintrc'),
this.destinationPath('.jshintrc')
);
},
mainStylesheet= function () {
var css = 'main';
if (this.includeSass) {
css += '.scss';
} else {
css += '.css';
}
this.copy(css, 'app/styles/' + css);
},
writeIndex= function () {
this.indexFile = this.src.read('index.html');
this.indexFile = this.engine(this.indexFile, this);
// wire Bootstrap plugins
if (this.includeBootstrap) {
var bs = '/bower_components/';
if (this.includeSass) {
bs += 'bootstrap-sass/assets/javascripts/bootstrap/';
} else {
bs += 'bootstrap/js/';
}
this.indexFile = this.appendScripts(this.indexFile, 'scripts/plugins.js', [
bs + 'affix.js',
bs + 'alert.js',
bs + 'dropdown.js',
bs + 'tooltip.js',
bs + 'modal.js',
bs + 'transition.js',
bs + 'button.js',
bs + 'popover.js',
bs + 'carousel.js',
bs + 'scrollspy.js',
bs + 'collapse.js',
bs + 'tab.js'
]);
}
this.indexFile = this.appendFiles({
html: this.indexFile,
fileType: 'js',
optimizedPath: 'scripts/main.js',
sourceFileList: ['scripts/main.js']
});
this.write('app/index.html', this.indexFile);
},
app= function () {
this.copy('main.js', 'app/scripts/main.js');
}
},
install: function () {
var howToInstall =
'\nAfter running ' +
chalk.yellow.bold('npm install & bower install') +
', inject your' +
'\nfront end dependencies by running ' +
chalk.yellow.bold('gulp wiredep') +
'.';
if (this.options['skip-install']) {
this.log(howToInstall);
return;
}
this.installDependencies();
this.on('end', function () {
var bowerJson = this.dest.readJSON('bower.json');
// wire Bower packages to .html
wiredep({
bowerJson: bowerJson,
directory: 'bower_components',
exclude: ['bootstrap-sass', 'bootstrap.js'],
ignorePath: /^(\.\.\/)*\.\./,
src: 'app/index.html'
});
if (this.includeSass) {
// wire Bower packages to .scss
wiredep({
bowerJson: bowerJson,
directory: 'bower_components',
ignorePath: /^(\.\.\/)+/,
src: 'app/styles/*.scss'
});
}
}.bind(this));
}
});
I think the problem is in the writing method. I also wanted to ask where to go next? Or did I pass a fundamental step toward learning web dev
i removed the var done =async() and replaced "this.prompt" by "return this.prompt"
most of the files are copied ... but there is still more invalid code ::
if you format your code, you'll see the writing function isn't doing anything. It declares a bunch of sub-functions, but doesn't run anyone.
I think the issue is you want an object but instead wrote a function: writing() {} instead of writing: {}.
I did a quick fix of the code, but didn't test it out. So there might be further syntax issue, but it should roughly look like this:
'use strict';
var fs = require('fs');
var path = require('path');
var yeoman = require('yeoman-generator');
var yosay = require('yosay');
var chalk = require('chalk');
var wiredep = require('wiredep');
module.exports = yeoman.extend({
scaffoldFolders: function() {
this.mkdir('app');
this.mkdir('app/css');
this.mkdir('app/sections');
this.mkdir('build');
},
initializing: function() {
this.pkg = require('../../package.json');
},
prompting: function() {
var done = this.async();
this.log(
yosay(
'Welcome to the marvelous ' +
chalk.red('generator-palmyra') +
' generator!'
)
);
var prompts = [
{
type: 'checkbox',
name: 'mainframeworks',
message: 'Would you like AngularJS or JQuery ?',
choices: [
{
name: 'Angular',
value: 'includeAngular',
checked: true,
},
{
name: 'JQuery',
value: 'includeJQuery',
checked: true,
},
],
},
{
type: 'checkbox',
name: 'features',
message: 'What more front-end frameworks would you like ?',
choices: [
{
name: 'Sass',
value: 'includeSass',
checked: true,
},
{
name: 'Bootstrap',
value: 'includeBootstrap',
checked: true,
},
{
name: 'Modernizr',
value: 'includeModernizr',
checked: true,
},
],
},
];
this.prompt(
prompts,
function(answers) {
var features = answers.features;
var mainframeworks = answers.mainframeworks;
var hasFeature = function(feat) {
return features.indexOf(feat) !== -1;
};
var hasMainframeworks = function(mainframework) {
return mainframeworks.indexOf(mainframework) !== -1;
};
// manually deal with the response, get back and store the results.
this.includeSass = hasFeature('includeSass');
this.includeBootstrap = hasFeature('includeBootstrap');
this.includeModernizr = hasFeature('includeModernizr');
this.includeAngular = hasMainframeworks('includeAngular');
this.includeJQuery = hasMainframeworks('includeJQuery');
done();
}.bind(this)
);
},
writing: {
gulpfile: function() {
this.fs.copy(
this.templatePath('gulpfile.js'),
this.destinationPath('gulpfile.js')
);
},
packageJSON: function() {
this.fs.copy(
this.templatePath('_package.json'),
this.destinationPath('package.json')
);
},
git: function() {
this.fs.copy(
this.templatePath('gitignore'),
this.destinationPath('.gitignore')
);
this.fs.copy(
this.templatePath('gitattributes'),
this.destinationPath('.gitattributes')
);
},
bower: function() {
var bower = {
name: this._.slugify(this.appname),
private: true,
dependencies: {},
};
if (this.includeBootstrap) {
var bs = 'bootstrap' + (this.includeSass ? '-sass' : '');
bower.dependencies[bs] = '~3.3.1';
}
if (this.includeModernizr) {
bower.dependencies.modernizr = '~2.8.1';
}
if (this.includeAngular) {
bower.dependencies.angular = '~1.3.15';
}
if (this.includeJQuery) {
bower.dependencies.jquery = '~2.1.1';
}
this.fs.copy(this.templatePath('bowerrc'), this.destinationPath('.bowerrc'));
this.write('bower.json', JSON.stringify(bower, null, 2));
},
jshint: function() {
this.fs.copy(
this.templatePath('jshintrc'),
this.destinationPath('.jshintrc')
);
},
mainStylesheet: function() {
var css = 'main';
if (this.includeSass) {
css += '.scss';
} else {
css += '.css';
}
this.copy(css, 'app/styles/' + css);
},
writeIndex: function() {
this.indexFile = this.src.read('index.html');
this.indexFile = this.engine(this.indexFile, this);
// wire Bootstrap plugins
if (this.includeBootstrap) {
var bs = '/bower_components/';
if (this.includeSass) {
bs += 'bootstrap-sass/assets/javascripts/bootstrap/';
} else {
bs += 'bootstrap/js/';
}
this.indexFile = this.appendScripts(
this.indexFile,
'scripts/plugins.js',
[
bs + 'affix.js',
bs + 'alert.js',
bs + 'dropdown.js',
bs + 'tooltip.js',
bs + 'modal.js',
bs + 'transition.js',
bs + 'button.js',
bs + 'popover.js',
bs + 'carousel.js',
bs + 'scrollspy.js',
bs + 'collapse.js',
bs + 'tab.js',
]
);
}
this.indexFile = this.appendFiles({
html: this.indexFile,
fileType: 'js',
optimizedPath: 'scripts/main.js',
sourceFileList: ['scripts/main.js'],
});
this.write('app/index.html', this.indexFile);
},
app: function() {
this.copy('main.js', 'app/scripts/main.js');
},
},
install: function() {
var howToInstall =
'\nAfter running ' +
chalk.yellow.bold('npm install & bower install') +
', inject your' +
'\nfront end dependencies by running ' +
chalk.yellow.bold('gulp wiredep') +
'.';
if (this.options['skip-install']) {
this.log(howToInstall);
return;
}
this.installDependencies();
this.on(
'end',
function() {
var bowerJson = this.dest.readJSON('bower.json');
// wire Bower packages to .html
wiredep({
bowerJson: bowerJson,
directory: 'bower_components',
exclude: ['bootstrap-sass', 'bootstrap.js'],
ignorePath: /^(\.\.\/)*\.\./,
src: 'app/index.html',
});
if (this.includeSass) {
// wire Bower packages to .scss
wiredep({
bowerJson: bowerJson,
directory: 'bower_components',
ignorePath: /^(\.\.\/)+/,
src: 'app/styles/*.scss',
});
}
}.bind(this)
);
},
});
gulp-inject does not working with event-stream.
var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
var inject = require('gulp-inject');
var es = require('event-stream');
var config = {
sassDir: './resources/assets/sass',
jsPath: './resources/app',
fontDir: './resources/fonts',
imageDir: './resources/images',
bowerDir: './bower_components'
};
gulp.task('index', function () {
return gulp.src('./resources/index.html')
.pipe(inject(gulp.src(mainBowerFiles('**/*.js'), {read: false}), {name: 'bower'}))
.pipe(inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false}))))
.pipe(gulp.dest('./public'));
});
The result coming like this.
<!-- inject:js -->
<script src="/resources/app/core.js"></script>
<script src="/resources/app/first-folder/01.js"></script>
<script src="/resources/app/second-folder/02.js"></script>
<!-- endinject -->
Unfortunately the mainBowerFiles('**/*.js') do not merge with inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false})))
Your problem is that you're invoking inject() twice with two different sources (the main bower files and the files in resources/app), but you want both sources to be injected into the same section.
What you need to do is call inject() once with the already merged sources:
gulp.task('index', function () {
return gulp.src('./resources/index.html')
.pipe(inject(es.merge(
gulp.src(mainBowerFiles('**/*.js'), {read: false}),
gulp.src(config.jsPath + '/**/*.js', {read: false})
)))
.pipe(gulp.dest('./public'));
});
EDIT: If you want to keep the order of the files you can use streamqueue instead of es.merge():
var streamqueue = require('streamqueue');
gulp.task('index', function () {
return gulp.src('./resources/index.html')
.pipe(inject(streamqueue({ objectMode: true },
gulp.src(mainBowerFiles('**/*.js'), {read: false}),
gulp.src(config.jsPath + '/**/*.js', {read: false})
)))
.pipe(gulp.dest('./public'));
});
Here is the code I'm working with and the way I'm thinking about the solution.
gulp.task('templates:components', function () {
log('Building components..');
//if (filename === 'app.jade') {
// return gulp.src().....
// } else
return gulp.src(source.templates.components)
.pipe($.if(!isProduction, $.changed(build.templates.views, {extension: '.html'})))
.pipe($.jade())
.on('error', handleError)
.pipe($.htmlPrettify(prettifyOpts))
.pipe(flatten({ includeParents: 1} ))
.pipe(gulp.dest(build.templates.views + 'views'));
});
I'm not sure how to set up my logic to detect the file, I've search but haven't been able to find a clear example or plugin for doing this.
How do I determine the outcome of a destination based on the filename?
I used gulp-flatten to pick out the part of the path I wanted.
var source = {
scripts: [paths.scripts + 'app.module.js',
// template modules
paths.scripts + 'modules/**/*.module.js',
paths.scripts + 'modules/**/**/*.js',
// custom modules
paths.scripts + 'components/**/*.module.js',
paths.scripts + 'components/**/*.js'
],
templates: {
components: [paths.components + '**/views/**/*.jade', paths.components + '**/**/**/*.jade']
},
styles: {
app: [paths.styles + '*.*'],
themes: [paths.styles + 'themes/*'],
watch: [paths.styles + '**/*', '!' + paths.styles + 'themes/*']
},
images: paths.images
};
// BUILD TARGET CONFIG
var build = {
scripts: paths.app + 'js',
styles: paths.app + 'css',
templates: {
index: '../',
views: paths.app,
cache: paths.app + 'js/' + 'templates.js',
},
images: paths.app + 'img'
};
gulp.task('templates:components', function () {
log('Building components..');
return gulp.src(source.templates.components)
.pipe($.if(!isProduction, $.changed(build.templates.views, {extension: '.html'})))
.pipe($.jade())
.on('error', handleError)
.pipe($.htmlPrettify(prettifyOpts))
.pipe(flatten({ includeParents: 1} ))
.pipe(gulp.dest(build.templates.views + 'views'));
});
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'
})
);
}