I'm new in gulp and I have a problem with managing hosted fonts in my website.
Does anyone know how I should write gulp task, which creates #fontface in my style.css file? (I tried to use this npm package (https://www.npmjs.com/package/postcss-font-magician#hosted) but it didn't work!)
here is my gulp task (styles.js):
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
hexrgba = require('postcss-hexrgba'),
colorFunctions = require('postcss-color-function'),
fontMagician = require('postcss-font-magician')({
hosted: ['../../app/assets/fonts']
});
gulp.task('styles', function() {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, colorFunctions,
fontMagician, autoprefixer]))
.on('error', function(errorInfo) {
console.log(errorInfo.toString());
this.emit('end');
})
.pipe(gulp.dest('./app/temp/styles'));
});
here is my css code:
body {
font-family: 'parastoo';
}
and this is my source tree:
|--app
| |-- assets
| | |-- fonts
| | | |-- parastoo.woff
| | | |-- parastoo.woff2
| |-- index.html
|-- gulp
| |-- tasks
| | |-- styles.js
|-- gulpfile.js
|-- package.json
|-- webpack.config.js
Thank you very much.
Related
after running gulp sass files are not compiled into CSS. I have checked directories and all looks fine.There is no error, gulp is running as if there is no .SASS file in the src/styles directory. Nothing is produced in dist/css folder. Any help would be appreciated. Thanks
Here is the gulpfile.js
var gulp = require('gulp'),
compass = require('gulp-compass');
gulp.task('compass', function () {
return gulp.src('src/styles/main.sass')
.pipe(compass({
sass: 'src/styles',
image: 'src/images',
css: 'dist/css',
generated_images_path: 'dist/images',
sourcemap: true,
style: 'compressed'
}))
.on('error', function(err) {
console.log(err);
});
});
gulp.task('default', function () {
gulp.watch('./src/styles/**/*.sass', ['compass']);
gulp.watch('./src/images/**/*', ['compass']);
});
my directory structure
root
|
|
+-- src
| |
| +-- styles/sass
| +-- images
|
+-- dist
|
+-- css
+-- images
This problem was solved by installing compass and sass as ruby gems and adding ruby path to the environment variables.
This one has me scratching my head for sure. I have my project set up like so
.
├── app
| └── styles
| ├── foundation
| | └── foundatipn.scss
| └── app.scss
├── build
| └── styles
└ └── app.css
My gulp-sass task compiles the app.scss correct and places the final file in build.styles.
However, when the sass task is triggered by gulp watch it puts a css file in app/styles/. It still compiles the correct file to build/styles.
Relevant code below
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
notify = require('gulp-notify'),
include = require('gulp-include'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps'),
cssnano = require('gulp-cssnano'),
browserify = require('browserify'),
source = require('vinyl-source-stream');
var reload = browserSync.reload;
var dest = './build';
var src = './app';
gulp.task("sass", function(cb){
//Compile Foundation SCSS to CSS
var stream = sass('app/styles/app.scss',{
loadPath: ['app/styles/foundation'],
})
//.pipe(notify("Compiling SCSS, Autoprefixeing, Minifying and Creating Sourcemaps"))
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
}))
.pipe(cssnano())
.pipe(sourcemaps.write('/'))
.pipe(gulp.dest(dest + '/styles'))
.pipe(reload({stream: true}));
return stream;
});
gulp.task('watch', function(){
gulp.watch('app/**/*.html', ['markup']);
gulp.watch('app/styles/**/*.scss', ['sass']);
gulp.watch('app/scripts/**/*.js',['js']);
gulp.watch('app/images/**/*.png', ['images']);
});
depending on what version of gulp / gulp sass you are using it could be your "base".
Something about gulp using /**/ to set it's base for dest files/folders.
see this post:
how base option affects gulp.src & gulp.dest
More importantly this line:
If you want to avoid this you have to explicitly specify the base option:
gulp.src('some/path/**/js/*.js', {base:'.'})
.pipe(gulp.dest('output'));
I hope it helps.
Using Grunt I would like to compile .less files coming from different dynamic sources into a single .css destination file, at a given path.
For instance, my source files are organized this way:
app
|_ modules
|_ module1
| |_ branding
| |_ brand1
| | |_ file1.less
| | |_ file2.less
| |_ brand2
| |_ file1.less
| |_ file2.less
|_ module2
|_ branding
|_ brand1
| |_ file1.less
|_ brand2
|_ file1.less
And I would like to compile them in a destination like the following:
app
|_ styles
|_ branding
|_ brand1.css
|_ brand2.css
Currently I am experimenting with a grunt task definition like the following:
less:{
branding: {
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/app/modules/",
src: ["**/branding/**/*.less"],
dest: "<%= yeoman.app %>/app/styles/branding/",
ext: ".css"
}
]
}
}
which clearly does not work, because it replicates the source tree.
Is it possible?
For those who are looking for a solution to a similar problem, I currently solved it using a "rename" function:
less:{
branding: {
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/app/modules/",
src: ["**/branding/**/*.less"],
dest: "<%= yeoman.app %>/app/styles/branding/",
ext: ".css",
rename: function(dest, src) {
var match = '/branding/',
brandized = src.replace(src.substring(0, src.indexOf(match)+match.length), '');
return dest + brandized.substring(0, brandized.indexOf('/')) + '.css';
}
}
]
}
}
Seems this is not solved besides being a recurrent question.
This is my folder structure:
project/
|
|--src/
| |--images/
| +--styles/
| +--style.css
|
+--build/
|--images/
+--style.min.css
Note how src/styles/style.css will reference url(../images/image.png) while the minified version build/style.min.css should reference url(images/image.png)
What combination of options for cssmin or clean-css can achieve this?
My current configuration:
cssmin: {
target: {
files: {
'build/style.min.css': 'src/styles/style.css'
}
}
}
We overrode javax.faces.application.ResourceHandlerWrapper and javax.faces.application.ResourceWrapper to load static resources, for instance css files, from the file system. How can we achieve that this resource loading mechanism also takes place for resources that are referenced in the newly loaded css file from the file system?
Thanks for any help.
Use the EL expression #{resource} in the CSS file to reference them dynamically instead of using a hardcoded path like /context/resources/someLibrary/somePath/someFile.ext or something.
E.g.
.foo {
background-image: url(#{resource['someLibrary:somePath/foo.ext']})
}
.bar {
background-image: url(#{resource['someLibrary:bar.ext']})
}
.baz {
background-image: url(#{resource['somePath/baz.ext']})
}
.moo {
background-image: url(#{resource['moo.ext']})
}
which would reference
WebContent
|-- resources
| |-- someLibrary
| | |-- somePath
| | | `-- foo.ext
| | `-- bar.ext
| |-- somePath
| | `-- baz.ext
| `-- moo.ext
:
This way the JSF default resource handler will substitute them with the right /javax.faces.resource URLs which will in turn go through the resource handler as well.