I'm trying both gulp.js and grunt.js to convert from markdown to PDF, both of them use markdownpdf npm package.
This is my gulpfile.js
gulp.task('markdownpdf', function () {
gulp.src('_src/*.md')
.pipe(concat('document.md'))
.pipe(markdownpdf({
cssPath: '/_src/css/pdf.css',
paperFormat: 'A4',
paperOrientation: 'portrait',
paperBorder: '2cm'
}))
.pipe(gulp.dest('_dist'));
});
Without cssPath option, markdownpdf package picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css (I tired to edit this file to confirm that it was picked)
Please help how to setup custom css path.
Thanks.
What's worked for me is to start the path with a ./. The single dot represents the directory with the gulpfile in it.
e.g
gulp.task('docs', function () {
return gulp.src('./docs/*.md')
.pipe(markdownpdf({
'cssPath': './docs/assets/pdf.css'
}))
.pipe(gulp.dest('./web/docs/pdfs'));
});
so '/_src/css/pdf.css' maps to what?
It should respond to relative path notation, so if it picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css by default, then try setting your cssPath value to ../../../_src/css/pdf.css, assuming _src is in your project's root
Maybe you will need back 5 levels.
My gruntfile.js...
markdownpdf: {
options: {
cssPath: "../../../../../css/style.css",
Related
I have been looking for a while but i haven't found a solution yet, I'm using node-sass and i need to edit the scss before compiling it (more specifically, the variables), sadly once you execute the render function it gets directly compiled into css, is there a way of editing the imported scss before node-sass compiles it ? Or read the scss and resolve all the imports without node-sass ?
thank you
First you should add !default keyword to end of your scss variables and then you can pass parameters which one you want to override for example:
You have an variable for primary color, in scss file yo should define it like
$primaryColor = #fff !default
and then while overriding this column you should send params like
{ primaryColor: '#bbb' } this one will override your primaryColor variable in your scss file.
const generateSassVariables = map =>
Object.keys(map)
.map(name => `$${name}:${map[name]};`)
.join('\n');
sass.render(
{
data: `${generateSassVariables(newVariables)}#import '${scssFilePath}';`,
includePaths: [styleBasePath, 'app/'],
outputStyle: 'compressed',
},
(error, result) => {..... })
I have directory structure like this.
dist
|--client
|--assets
|--images
|--bower_components
|--server
|--.bower.json
I am trying to clean dist folder, except assets/images folder.
But when i execute this command in dryRun mode, it doesn't remove assets/images file. But after disabling it, it remove all the files and folder.
gulp.task('clean:dist', () => {
del.sync([
`${paths.dist}/!(.git*|.openshift|Procfile)**`,
`${paths.dist}/client/**`,
`!${paths.dist}/client/assets`,
`!${paths.dist}/client/assets/**`], {
//dryRun: true
});
//console.log('dELETE FIELSE ARE: ' + JSON.stringify(value));
});
value of used constant is:
${paths.dist} ='dist';
The offical del documentation states the following:
The glob pattern ** matches all children and the parent.
So this won't work:
del.sync(['public/assets/**', '!public/assets/goat.png']);
You have to explicitly ignore the parent directories too:
del.sync(['public/assets/**', '!public/assets', '!public/assets/goat.png']);
In your case you delete dist/client/**, which includes the dist/client directory itself. If you just ignore dist/client/assets/** the dist/client directory is still deleted.
You need to explicitly ignore the dist/client directory:
gulp.task('clean:dist', () => {
del.sync([
`${paths.dist}/!(.git*|.openshift|Procfile)**`,
`${paths.dist}/client/**`,
`!${paths.dist}/client`,
`!${paths.dist}/client/assets/**`]);
});
I'm trying to copy all my assets into my public dir but I want all assets except JavaScript and CSS files cause they are concatenated and minified into prod.min.js and prod.min.css so I want to make two exception for min.js and min.css files.
I have tried this (only for JS for now)
gulp.src([src + '/**/*', src + '/**/*.min.js', '!' + src + '/**/*.js'])
.pipe(gulp.dest(dest))
But it results in no JavaScript files at all.
How can do this?
Create separate glob arrays for CSS and JS. Then you can be more selective in which get moved.
I am also dealing with this problem at the moment.
The way I patched it (it's a patch because it's not really an optimal solution) is by making two passes:
First pass -> move all (**/*.*) files and negate all js extensions (!**/*.js)
Second pass -> move only the minified files (**/*.min.js)
A quick task example:
gulp.task('move-min-not-src', [], function() {
var paths = [
[
'source-folder/**/*.*',
'!source-folder/**/*.js'
],
[
'source-folder/**/*.min.js'
]
];
paths.forEach(function(path) {
gulp.src(path)
.pipe(
gulp.dest('destination-folder/')
);
});
});
I am using steve sanderson's yeoman knockout scaffolding described here.
However I have one issue which is if I decide to create folders for different types of modules, and If I then want to inject one of these modules into my components using folder name conventions then I have to use a very verbose path resolution like "../../services/service".
define(["knockout", "text!./home.html","../../services/service"], function(ko, homeTemplate, service) {
function HomeViewModel(route) {
this.message = ko.observable('Welcome to App!');
}
HomeViewModel.prototype.doSomething = function() {
this.message('You invoked doSomething() on the viewmodel.');
};
return { viewModel: HomeViewModel, template: homeTemplate };
});
I am wondering if there is a better way to do this. For example just being able to use folder name and file name like "services/service"
The paths configuration is your answer (ref). In your configuration do:
require.config({
// ...
paths: {
'services': 'path/to/services/folder'
},
// ...
})
Now you can require the path/to/services/folder/myservice.js module from any other module as:
define(['services/myservice'], function(myservice) {
// ...
});
Is there anyway to set the baseUrl at the path level? I have 1 dependency (my-dependency) in a different folder than the other dependencies. However, when I set the path for that 1 dependency, any dependency that my-dependency has, is relative to the baseUrl of the main app, and not to my-dependency.
I'm looking for something like this maybe:
require.config(
baseUrl: '/js/ad-buys',
paths: {
"my-dependency": {
path: "/js/contacts/my-dependency"
baseUrl: "/js/contacts"
}
}
);
No, that's not possible.
You should not need it anyway. What you describe wanting to do should be achievable by using relative paths for your dependencies. For instance, my-dependency could contain:
define(['./foo'], function (foo) {
});
This would load the module /js/contacts/foo and bind it to the foo parameter of your function . You can also use .. if you need to move up the hierarchy.