I have the following file structure:
application
|- deploy
|----- Gruntfile.js
|-- package.json
|-- public
|----- js
|-- views
|----- templates
In my Gruntfile.js file I'm trying to compile jade templates likes the following:
module.exports = function(grunt) {
var templatizer = require('templatizer');
grunt.loadNpmTasks('grunt-execute');
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
execute: {
templatizer: {
options: {
templatesDir: 'need path for ../views/templates', // ?
outputFile: 'need path for ../public/js/templates.js' // ?
},
call: function(grunt, options) {
templatizer(options.templatesDir, options.outputFile);
grunt.log.writeln('Templatizer done');
}
}
}
});
// Default task(s).
grunt.registerTask('default', ['execute:templatizer']);
};
I don't understand how could I resolve pathes for templatesDir and outputFile options?
it would be easier for you to use the templatizer-plugin
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-templatizer');
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
templatizer: {
files: {
'public/js/templates.js': ['views/templates/*'] // paths are relative from your gruntfile
}
}
}
});
// Default task(s).
grunt.registerTask('default', ['templatizer']);
whatever you do, it is almost always wrong to "misuse" the execute-plugin. search the grunt-plugins, and if no plugin exists, create one using grunt-init gruntplugin. it is really easy.
EDIT:
i dont like the gruntfile to be in the deploy-dir. in my opinion it should always be in the root directory of your project. if you want to leave it in the deploy directory, you run it there right? then your config would look like this (remember: paths are relative from your gruntfile!):
templatizer: {
files: {
'../public/js/templates.js': ['../views/templates/*']
}
}
Related
I have the following files structure:
themes
folder1
-scss
-style.scss
folder2
-scss
-style.scss
foldern
-scss
-style.scss
package.json
gulpfile.js
Need Output in this format:
themes
folder1
-scss
-style.scss
css
-style.css
folder2
-scss
-style.scss
css
-style.css
foldern
-scss
-style.scss
css
-style.css
package.json
gulpfile.js
gulpfile.js:
(function () {
'use strict';
var gulp = require('gulp'),
eslint = require('gulp-eslint'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps')
gulp.task('sass', function () {
return gulp
.src('./**/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'uncompressed'
}).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./**/css'));
});
gulp.task('watch', gulp.series('sass', function () {
gulp.watch('./scss/**/*.scss', gulp.series('sass'));
}));
})();
When I compiled using above gulpfile then it's creating **/css/folder1/stle.css **/css/folder2/style.css folders in the theme directory. how can I compile in this format? Is there any specific plugin there in gulp for this.
Thanks in advance.
Try this:
var gulp = require('gulp'),
sass = require('gulp-sass'),
// etc.
// two more plugins
rename = require('gulp-rename')
path = require('path');
gulp.task('sass', function () {
return gulp
.src('./**/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'uncompressed'
}).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
// rename the current file's parent directory
.pipe(rename(function (file) {
// file.dirname = current folder, your "scss"
// then get the parent of the current folder, e.g., "folder1", "folder2", etc.
let parentFolder = path.dirname(file.dirname)
// set each file's folder to "folder1/css", "folder2/css", etc.
file.dirname = path.join(parentFolder, 'css');
}))
.pipe(gulp.dest('.'));
});
I got situation like, I included morris.js file from vendor folder, and configured in ember-cli-build.js file but then my specific modified feature is working in development but not in the production build.
I am using ember-cli-babili for minification. either I should fix which minification part causing the issue or I should remove this file alone from minification.
Is this possible? any guidance is appreciated.
Yes, it is possible!
// ember-cli-build.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
minifyJS: {
options: {
exclude: ["**/morris.js"]
}
}
});
//...
return app.toTree();
};
I have an addon which needs to copy a set of JS files from their bower directory to the Ember app's root of /dist (this is for scoping rules associated with service workers). I thought maybe I could use the treeForApp hook but while I'm getting no errors I'm also not getting the desired result.
The index.js is:
const Funnel = require('broccoli-funnel');
module.exports = {
name: 'ember-upup',
treeForApp: function(tree) {
tree = new Funnel(tree, { include:
[
'bower_components/upup/dist/upup.min.js',
'bower_components/upup/dist/upup.sw.min.js'
]});
return this._super.treeForApp.call(this, tree);
},
Note: I thought I might be able to solve this problem by simply copying the javascript files as part of index.js postBuild hook but while this DOES put the JS files into the dist folder's root it is not served by ember-cli's ember serve apparently if not pushed through one of it's build pipelines.
Stefan Penner has now pointed out the the dist directory is for developers to look at but serving is actually done within the tmp directory structure ... this explains why my "hack" didn't work.
It looks like my initial attempt wasn't entirely far off. To make it work you need to hook into the treeForPublic hook like so:
const path = require('path');
const Funnel = require('broccoli-funnel');
const mergeTrees = require('broccoli-merge-trees');
const JS_FILES = ['upup.min.js', 'upup.sw.min.js'];
module.exports = {
treeForPublic: function() {
const upupPath = path.join(this.app.bowerDirectory, 'upup/dist');
const publicTree = this._super.treeForPublic.apply(this, arguments);
const trees = [];
if (publicTree) {
trees.push(publicTree);
}
trees.push(new Funnel(upupPath, {
include: JS_FILES,
destDir: '/'
}));
return mergeTrees(trees);
}
}
Hope that helps.
I am trying to make my addon supply vendor'd data to the app using it. The library is CKEditor (a customized version generated from the CKEditor builder).
I know I can use the addon blueprint to add a bower dependency but since CKEditor is customized I can't use bower to download that same version in the consuming app.
I've used the treeForPublic and broccoli funnel to copy from my addon vendor folder the whole ckeditor folder to the app public folder (this is required by ckeditor).
My only issue is that the consuming app also needs to have the ckeditor folder in its vendor folder or it won't build because the watcher can't find it.
I was with the impression that if the addon was moving the folder to the public destination and was also importing js/css files in the included hook the original vendor'd folder was not needed by the final app.
Have I understood it wrong or can I do this without duplicating my ckeditor folder between the addon and the app ?
here is what I have so far :
included: function(app) {
this._super.included(app);
app.import('vendor/ckeditor_custom/ckeditor.js');
app.import('vendor/ckeditor_custom/styles.js');
app.import('vendor/ckeditor_custom/lang/fr.js');
app.import('vendor/ckeditor_custom/skins/minimalist/editor.css');
},
contentFor: function(type, config) {
if (type === 'vendor-prefix') {
return "window.CKEDITOR_BASEPATH = 'assets/ckeditor/';";
}
},
treeForPublic: function (tree) {
var ckeditorTree = new Funnel('vendor/ckeditor_custom/', {
srcDir: '/',
exclude: ['**/.DS_Store','**/*.md'],
destDir: 'assets/ckeditor'
});
return BroccoliMergeTrees([tree, ckeditorTree]);
},
treeForVendor: function (tree) {
var ckeditorTree = new Funnel('vendor/ckeditor_custom/', {
srcDir: '/',
exclude: ['**/.DS_Store','**/*.md'],
destDir: 'ckeditor_custom'
});
return ckeditorTree;
},
Thanks for the help!
Give this a whirl:
var path = require('path');
var mergeTrees = require('broccoli-merge-trees');
var concat = require('broccoli-concat');
module.exports = {
name: 'myaddon',
treeForVendor: function(tree) {
var trees = [tree];
var ckeditorTree = path.join('bower_components', 'ckeditor_custom');
trees.push(concat(ckeditorTree, {
inputFiles: [
'ckeditor.js',
'styles.js',
'lang/fr.js'
],
outputFile: '/ckeditor.js'
}));
trees.push(concat(ckeditorTree, {
inputFiles: [
'skins/minimalist/editor.css'
],
outputFile: '/ckeditor.css'
}));
return mergeTrees(trees);
},
included: function included(app) {
this.app = app;
app.import('vendor/ckeditor.js');
app.import('vendor/ckeditor.css');
}
};
I'm having trouble adding CSS libraries to my Ember CLI project when using the broccoli-compass plugin.
I've added this line to my brocfile:
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets',
importPath: 'vendor'
});
};
but now I'm stuck. I've tried
app.import('vendor/bootstrap/docs/assets/css/bootstrap.css');
but this doesn't work, because (I think) I've overwritten app.styles.
I've tried adding an importPath to my Compass config, so that I can #import in my SASS files, but that hasn't worked either.
It seems the app.styles = ... line above overwrites some Ember CLI code, so the app.import suggestion from Ember CLI guides doesn't work.
After spending some time with Broccoli I figured out how to serve the vendor folder:
var pickFiles = require('broccoli-static-compiler');
var vendor = pickFiles('vendor', {srcDir: '/', destDir: '/vendor'});
Now broccoli serve serves everything in my vendor folder, and
#import 'vendor/bootstrap/docs/assets/css/bootstrap.css';
works in my app.scss file.
Of course, I will need to do more work so that only the distribution versions of the vendor assets are included in the final build.
Version 0.0.5 fixes the issue, here's what worked for me:
var compileCompass = require('broccoli-compass');
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets',
importPath: [
process.cwd() + '/vendor/foundation/scss'
],
});
};
Now I'm able to do #import foundation in my scss file.
You can add a vendor file in addon.scss adding a treeForAddon hook in index.js of the addon, merging the vendor directory with a Funnel before the compilation.
treeForAddon: function(tree) {
this._requireBuildPackages();
if (!tree) {
return tree;
}
var addonTree = this.compileAddon(tree);
var vendorCss = new Funnel(this._treeFor('vendor'), {
srcDir: '/css'
});
var mergedStylesTree = new MergeTrees([this._treeFor('addon-styles'), vendorCss]);
var stylesTree = this.compileStyles(mergedStylesTree);
return MergeTrees([addonTree, stylesTree].filter(Boolean));
}