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.
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),
};
},
}),
});
In my project I compile multiple bundles from source files in nested directories using rollup.
I had a gulpfile with the following code, which worked fine:
function build_app_js(file, name) {
return gulp.src(file)
.pipe(sourcemaps.init())
.pipe(rollup({format:'iife'}))
.pipe(terser())
.pipe(rename(name + '.js'))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(js_apps_dir))
}
// call the above for multiple sets of file+app_name
But then I changed one of the dependencies in my ES6 code which I accessed by relative path into an npm package, so it is now in node_modules. Rollup needs a plugin to resolve this, so I changed the above to this:
.pipe(rollup({plugins: [resolveNodeModules()], format:'iife'}))
However this simply does not work.
I consulted rollup's docs on gulp, and adapted the example to my case, so it now looks like this:
function build_app_js(file, name) {
return rollup.rollup({
input: file,
plugins: [
resolveNodeModules()
]
}).then(bundle => {
return bundle.write({
file: js_apps_dir + '/' + name + '.js',
format: 'iife',
sourcemap: true
});
});
}
This works, but has no minification step, and I don't know how to add one.
More generally, this is a totally different paradigm from using pipe(), and I do not know how to make both work together.
Do I try to add minification in the Promise syntax, or do I wrap the Promise function in such a way that I can use it with pipe?
Answering own question after 8 days.
Minification can be achieved via rollup plugins, such as rollup-plugin-terser.
You just need to be careful with how you import them:
var rollup = require('rollup');
var resolveNodeModules = require('rollup-plugin-node-resolve');
//var terser = require('rollup-plugin-terser'); // WRONG
var {terser} = require('rollup-plugin-terser'); // CORRECT
function build_app_js(file, name) {
return rollup.rollup({
input: file,
plugins: [
resolveNodeModules(),
terser()
]
}).then(bundle => {
return bundle.write({
file: js_apps_dir + '/' + name + '.js',
format: 'iife',
sourcemap: true
});
});
}
If you import it the wrong way, you will get a terser() is not a function type error, which is because it will have imported terser as a module.
It's a bit annoying that different rollup-plugins can't be imported the same way, but hey.
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)
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.