I'm trying to figure out how to write a Gulp task, using PostCSS, so that it outputs the resulting files in the postcss subfolder of their original path.
Imagine you have these files:
/app/styles/index.css
/app/elements/pages/home.css
/app/elements/pages/profile.css
And you want Gulp to output the postCSS process to:
/app/styles/postcss/index.css
/app/elements/pages/postcss/home.css
/app/elements/pages/potcss/profile.css
This is my current configuration, but it doesn't work:
gulp.task('css', function () {
return gulp.src([
'app/styles/index.css',
'app/elements/**/*.css'
], {base: './'})
.pipe(gulp.postcss([require('cssnext')()]))
.pipe(gulp.dest('postcss'))
});
In fact, with the abive configuration Gulp will output all files with their relative subdirectories inside one postcss folder in the root of your project.
Any idea how to fix it? Thanks!!
I've found a viable solution, using gulp-rename. This is the updated task configuration:
gulp.task('css', function () {
return gulp.src([
'app/styles/index.css',
'app/elements/**/*.css'
], {base: './'})
.pipe($.postcss([require('cssnext')()]))
.pipe($.rename(function (path) {
path.dirname += "/postcss";
}))
.pipe(gulp.dest('./'))
});
This works perfectly. If anyone though knows a way to do it without using additinal external plugins, just through Gulp basic API, please post it. Thanks! Cheers
Related
Quick Summary of my question:
Does Gulp 3.6.0 dest() handle glob-base the same way as 4.0.0?
function other() {
return src([
path.join("src/**/*"),
path.join("!src/**/*.{html,css,js,scss}")
])
.pipe(fileFilter)
.pipe(dest(dist));
}
Running Gulp 3.6.0 with the code above produced this result:
Note that the folders and files in question added to the dist folder by this code were:
-app
-assets
-config
favicon.ico
Now running the same code in 4.0.0 produces this:
I know that the glob-base is added on by default to the destination when it's piped through, however is this behaviour different to how gulp handled mirroring source to dest file directory structure in 3.6.0? The example would suggest otherwise.
If anyone could provide me with a solution for producing the same folder structure as supplied in my 3.6.0 result that would be great. I've tried gulp-flatten and gulp-rename but nothing is producing the desired result of nicely removing only the glob-base.
So I'm still not sure what the significance of upgrading to Gulp 4.0 actually was with relation to how glob-parent/glob-base is handled however I managed to get what I needed using the base option.
This option effectively nullified the additional src hard-coded path reference before /**/ in the path.
function other() {
var fileFilter = plugins.filter(function(file) {
return file.stat.isFile();
});
var appFilter = plugins.filter(function(file) {
return file.path.indexOf("\\src\\app\\") === -1;
});
return src(path.join(conf.paths.src, "/**/*"), { base: conf.paths.src })
.pipe(appFilter)
.pipe(fileFilter)
.pipe(dest(conf.paths.dist));
}
Following code, tried with both ./ as src and dest. Gave security administration full rights to folders, just in case if there was any issue.
So whenever I change styles.css from the styles folder, the code runs good on gulp watch and detects change too. It does run styles command on file change too. But then no folders are created in my dest folder.
var gulp = require('gulp');
gulp.task('styles' , function() {
return gulp.src('/app/assets/styles/styles.css')
.pipe(gulp.dest('/app/styles.css'));
});
gulp.task('watch',function(){
gulp.watch('./app/assets/styles/styles.css',
function() {
gulp.start('styles');
});
});
gulp.dest() takes a folder only, not a file. It probably is creating a folder, it is just called styles.css! Look under that for your file styles.css.
You probably want gulp.dest('./app'). the file name will be retained automatically.
I would also simplify to the below. gulp.start is not really documented.
gulp.task('watch',function(){
gulp.watch('./app/assets/styles/styles.css', ['styles']);
});
gulp.task('styles' , function() {
// added the . before /app here and in dest
return gulp.src('./app/assets/styles/styles.css')
.pipe(gulp.dest('./app'));
});
I'm trying to use gulp-elm with a monolithic architecture. I have setup my project dir with client and server directories and I've put my gulp file in the main directory. The directory structure is pretty simple.
project/
gulpfile.js
package.json
client/
elm-package.json
server/
...
When i run, for example,
gulp elm-init
with the following task:
// File paths
var paths = {
dest: 'client/dist',
elm: 'client/src/*.elm',
static: 'client/src/*.{html,css}'
};
// Init Elm
gulp.task('elm-init', function(){
return elm.init({ cwd : 'client' });
});
// Compile Elm to HTML
/*gulp.task('elm', ['elm-init'], function(){
return gulp.src(paths.elm)
.pipe(plumber())
.pipe(elm({ cwd : 'client' }))
.pipe(gulp.dest(paths.dest));
});*/
the elm-stuff folder and elm-package.json get moved to the main project directory. Is this expected? if not, is there a correct way to use a gulpfile from the parent directory to build an elm package in a nested directory? I think my effort matches the example.
gulp.task('init-nested', function(){
return elm.init({cwd: 'elm/nested-elm/'});
});
gulp.task('nested', ['init-nested'], function(){
return gulp.src('elm/nested-elm/*.elm')
.pipe(elm.make({filetype: 'html', cwd: 'elm/nested-elm/'}))
.pipe(gulp.dest('dest/'));
});
I've tried looking at the source, as well as following dependencies to see if i could figure it out myself, but i'm relatively unfamiliar with node so it's hard for me to figure out exactly what's going on in the gulp-elm source (as well as one of the deps i checked out.)
I was using this tutorial by Auth0 which had an old version of gulp-elm in package.json. Ugh!
I have the following code, but it can't read files from src folder. Does anyone know the path where gulp read file from?
gulp.task('default', function() {
return gulp.src(__dirname + './src/*')
.pipe() ...//other code
});
Folder structure:
--app
--gulp
--gulpfile.js
--src
--(files-to-be-read, for example: 1.png)
The __dirname global returns the current directory and will not include aditional slash at the end, so concatenating './otherDir' will become '/dir./otherDir'.
Just remove the dot from the string to concatenate.
https://nodejs.org/docs/latest/api/globals.html
I would think - because I am not a Node.js expert - that Gulp uses the current working directory.
The directory which contains the package.json and the Gulp script.
So, when invoking Gulp in the app/gulp directory, you can get away with this:
gulp.task('default', function() {
return gulp.src('src/*')
.pipe() ...//other code
});
You can also use relative paths from that dir, like this:
gulp.task('other', function() {
return gulp.src('../../whatever/*')
.pipe() ...//other code
});
For each module I have some files that need to be copied over to the build directory, and am looking for a way to minimize the repeated code from this:
gulp.src('./client/src/modules/signup/index.js')
.pipe(gulp.dest('./build/public/js/signup'));
gulp.src('./client/src/modules/admin/index.js')
.pipe(gulp.dest('./build/public/js/admin'));
to something like this:
gulp.src('./client/src/modules/(.*)/index.js')
.pipe(gulp.dest('./build/public/js/$1'));
Obviously the above doesn't work, so is there a way to do this, or an npm that already does this?
Thanks
Not the answer, but applicable to this question's appearance in search results.
To copy files/folders in gulp
gulp.task('copy', () => gulp
.src('index.js')
.pipe(gulp.dest('dist'))
);
The best way is to configure your base when sourcing files, like so:
gulp.src('./client/src/modules/**/index.js', {base: './client/src/modules'})
.pipe(gulp.dest('./build/public/js/'));
This tells gulp to use the modules directory as the starting point for determining relative paths.
(Also, you can use /**/*.js if you want to include all JS files...)
return gulp.src('./client/src/modules/(.*)/index.js')
.pipe(gulp.dest('./build/public/js/$1'));
Worked for me !
Use for preserve input directory tree will be preserved.
.pipe(gulp.dest(function(file) {
var src = path.resolve(SRC_FOLDER);
var final_dist = file.base.replace(src, '');
return DIST_FOLDER + final_dist;
}))
Using this, you can put in the src: .src(SRC_FOLDER + '/**/*.js').
The others answers not worked for me (like using base: on src()}, because some plugins flatten the directory tree.
copy files in parallel
gulp.task('copy', gulp.parallel(
() => gulp.src('*.json').pipe(gulp.dest('build/')),
() => gulp.src('*.ico').pipe(gulp.dest('build/')),
() => gulp.src('img/**/*').pipe(gulp.dest('build/img/')),
)
);