I had it working a couple weeks ago, but for some reason, the following is no longer copying my files from the assets directory to the dist directory.
const gs = gulp.series,
gp = gulp.parallel;
gulp.task('fonts', (done) => {
gulp.src([
'node_modules/font-awesome/fonts/*'
])
.pipe(gulp.dest(paths.dist+"/fonts/fontawesome"));
done();
})
gulp.task('assets', gs('fonts'), (done) => {
gulp.src([
'assets/**/*', // all files
'assets/**/.*', // all hidden files
'!assets/{scripts,scripts/**}', //ignore scripts directory.
'!assets/{stylesheets,stylesheets/**}' //ignore scripts directory.
])
.pipe(gulp.dest(paths.dist));
done();
});
It does create the fonts folder and copies the fonts from font-awesome, but that's about it.
If I remove gs('fonts') from the 'assets' tasks, it does appear to work properly.
My directory structure is:
assets
/fonts
/img
/scripts
/stylesheets
.htaccess
.robots.txt
I've tried putting the path directly to the .htaccess file and it too isn't copied over. Thoughts?
Also - if there's a better way to write this, I'm open to suggestions.
I figured it out.
gulp.task('fonts', (done) => {
gulp.src([
'node_modules/font-awesome/fonts/*'
])
.pipe(gulp.dest(paths.dist+"/fonts/fontawesome"));
done();
})
gulp.task('assets', gs('fonts', (done) => {
gulp.src([
'assets/**/*', // all files
'assets/**/.*', // all hidden files
'!assets/{scripts,scripts/**}', //ignore scripts directory.
'!assets/{stylesheets,stylesheets/**}' //ignore scripts directory.
])
.pipe(gulp.dest(paths.dist));
done();
}));
My assets task was calling the 'fonts' task only because I didn't include the callback function in the gulp.series call. gs('fonts'), (done) vs gs('fonts', (done)
Related
I am using the StoryShots addon for Storybook to test snapshots from my React project. I would like to save all snapshot files in one directory in relation to the project directory. The default is that the snapshots are saved in relation to the story's location. I tried various configurations (like working with __dirname) but couldn't come up with a solution yet. Maybe someone has an idea?
Here is my storyshots test file used by Jest (storyshots.test.ts):
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '#storybook/addon-storyshots'
initStoryshots({
test: multiSnapshotWithOptions(),
stories2snapsConverter: new Stories2SnapsConverter({
snapshotsDirName: './__snapshots__/',
storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
})
})
You can do something like this:
const IMAGE_SNAPSHOT_DIR = path.resolve(path.join(__dirname, 'component-image-snapshots'));
initStoryshots({
test: imageSnapshot({
getMatchOptions: (option) => {
const filename = option.context.kind.replace(' ', '');
return {
customSnapshotsDir: path.join(IMAGE_SNAPSHOT_DIR, filename),
};
},
}),
});
I am trying to make "main.css" file to be directly in css folder.
However, I get this path "/css/Content/scss/main.css" and I want
"/css/main.css"
gulp.task('sass', () => {
const sourceFolder = path.join('.', 'Content', 'scss', 'main.scss');
const distFolder = path.join('.', 'wwwroot', 'css');
return gulp.src(sourceFolder)
.pipe(sass({
sourceMap: true,
style: 'compressed'
}))
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(distFolder))
.on('end', () => console.log(`[${new Date().toLocaleTimeString()}] -> sass compilation complete...`));
});
Assuming you want main.css to end up in wwwroot/css try changing to this line:
return gulp.src(sourceFolder, { base: path.join('Content', 'scss') })
Sorry but I cannot explain why your original code works on Linux.
From glob base in gulpjs.docs:
Vinyl instances generated by src() are constructed with the glob base
set as their base property. When written to the file system with
dest(), the base will be removed from the output path to preserve
directory structures.
So with the base set as path.join('Content', 'scss') that portion of the filepath will be removed, thus main.css will go directly into your distFolder with the parent folders removed.
I am not quite familiar with Gulp but need to use it for a project. my folder structure is like this
- project
-- src
--- sass
---- css
----- ..many .sass files here
----- partials
------ ...many .sass files here
-- www
--- css
----- ....css files should go here (working)
------ partials
------- ...subfolder files should go here (not working)
My attempt looks like this
var config = {
sass: {
src: [
'./src/sass/css/**/**.scss', './src/sass/css/partials/**/**.scss
],
paths: [
'./src/scss'
]
},
}
gulp.task('sass', function () {
return gulp.src(config.sass.src).pipe(sass({
paths: config.sass.paths.map(function(p){
return path.resolve(__dirname, p);
})
}))
.pipe(gulp.dest(path.join(config.dest, 'css')));
});
What would be the right way of doing this? Do I need to separate sass tasks as the destination directories are different? any help would be appreciated!
We are using gulp to compile all our LESS files into the target/ of a Maven project. This task alone takes ~51secs, so we would like to speed it up and skip unchanged LESS files. We need a file cache because gulp is called from Maven and the build runs inside an IDE, so the gulp process cannot stay in memory.
At best, the cached CSS files should be copied to target/ even if /target was deleted by a Clean & Build.
Here's my code:
var cache = require('gulp-cache');
var fileCache = new cache.Cache({ cacheDirName: 'gulp-cache' });
gulp.task('less', function () {
return gulp.src([webappPath + '/**/*.less'])
.pipe(fileCache('less'))
.pipe(sourcemaps.init())
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')],
plugins: [cleancss],
relativeUrls: true
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(target));
;
});
The line .pipe(fileCache('less')) runs into an error:
TypeError: fileCache is not a function.
(Documentation at https://www.npmjs.com/package/gulp-cache )
(1) The gulp-cache plugin needs to wrap your less plugin. That way only files that have changed will be passed through to less.
(2) You don't necessarily need to instantiate your own cache.Cache object. gulp-cache will create one for you if you don't. You only need to do it yourself if you want to have multiple caches. In that case you can pass the cache.Cache object using the fileCache option.
gulp.task('less', function () {
return gulp.src([webappPath + '/**/*.less'])
.pipe(sourcemaps.init())
.pipe(cache(less({
paths: [path.join(__dirname, 'less', 'includes')],
plugins: [cleancss],
relativeUrls: true
}), {
fileCache: new cache.Cache({ cacheDirName: 'gulp-cache' })
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(target));
});
My Gulp SCSS Compiler below works fine with single files, and when including files into a single output e.g. styles.scss & _base.scss which would output styles.css.
However if I was two output files e.g. styles.css & base.css upon making the scss file 'base.scss' it complies it to the dest still with the .scss extension. Its not till I actually rerun the compile task till I get a base.css file as well as the base.scss file in the dest folder...
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss', { style: 'expanded' })
.pipe(plugins.sass())
.pipe(gulp.dest('public_html/css'));
});
Im using node-sass. I do not want to use ruby-sass
Output in public_html/css/
What I'm getting
css/
- base.scss
- base.css
- style.css
what I want to get
css/
- base.css
- style.css
You are putting { style: 'expanded' } in the incorrect location of the function. Your function should look like this instead:
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss')
.pipe(plugins.sass({ style: 'expanded' }))
.pipe(gulp.dest('public_html/css'));
});
There is no such an option as { style: 'expanded' } available in for gulp.src
To control the output style, you need to specify outputStyle and pass it as an argument with plugins.sass(options) call.