I have the next files structure:
modules/
list/
news/
news.scss
login/
login.scss
common/
common.scss
And I want to get next structure using gulp:
modules/
list/
news/
news.scss
news.css
login/
login.scss
login.css
common/
common.scss
Here is part from my gulpfile:
gulp.src("modules/list/*/*.scss")
.pipe(sass())
.pipe(gulp.dest("modules/list/"));
In common.scss there are different variables. It is necessary that variables from common.scss will be used in each module(news.scss, login.scss). How to update my gulpfile that common.scss will be concatenated with each module scss file?
Sounds like a job for stream arrays... here's the solution, please check the comments for what's going on:
var merge = require('merge2');
var glob = require('glob');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
gulp.task('styles', function(done) {
// first, we glob our files like we would with gulp.src
glob('modules/list/**/*.scss', function(er, files) {
// for each of those files we create a new stram
var tasks = files.map(function(file) {
// this gives us the concat name, which is the same
// as the original file's name
var concatStr = file.substr('modules/list/'.length)
// we load common.scss and our file
return gulp.src(['modules/common/common.scss', file])
// concatenate it
.pipe(concat(concatStr))
});
// we merge all our streams
merge(tasks)
// run them through sass
.pipe(sass())
// and save them where we want them
.pipe(gulp.dest('modules/list'));
// ~fin
done();
});
});
You might want to take a look into Sass's #import directive, though.
Related
I wrote a gulp task to process all scss files in one folder into separate css files.
gulp.task('process', function () {
gulp.src(['./base.scss', './layout/*.scss'])
.pipe(sass())
.pipe(gulp.dest('dist'))
});
Now I want to concatenate one file (base.scss) to each scss process; how can I do this?
This should help you but I didn't test it. Gulp-foreach is good for you, it will treat each file from gulp.src as its own stream which you can manipulate separately. The code below then appends your base.scss to each stream, then concatenates them and then they go through the sass pipe.
var foreach = require('gulp-foreach');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');
gulp.task('default', function () {
return gulp.src('./layout/*.scss')
// treats each file in gulp.src as a separate stream
.pipe(foreach(function (stream, file) {
return stream
// append or prepend
.pipe(addsrc.append('./base.scss'))
// you do have access to the 'file' parameter here if you need to rename
.pipe(sass())
.pipe(concat(path.basename(file.path)))
.pipe(gulp.dest('dist'));
}));
});
Let me know if it works for you.
I want to use gulp to compile SASS for my custom Wordpress plugins.
All plugin folder share same folder structure:
wp-content/plugins/pluginname
assets
dist -
src - scss
GULP TASK
gulp.task('plugin-css', () => {
// Main SASS Style Sheet
const pluginSass = gulp.src(`wp-content/plugins/**/assets/src/*.scss`)
.pipe(plumber(plumberErrorHandler))
.pipe(sass());
// Merge the two streams and concatenate their contents into a single file
return merge(pluginSass)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest(function(file) {
return file.base;
}));
});
Currently my compiled css file is being output into the same folder as the src sass. How can I output my compiled sass into 'dist' folder?
It is not clear to me what you are trying to do with the merges (so NOTE I simplified those out) but here is something that should help you get to putting your result into a dist folder where you want it to be:
var path = require('path');
var rename = require('gulp-rename');
gulp.task('default', function () {
const pluginSass = gulp.src("wp-content/plugins/**/assets/src/*.scss")
.pipe(sass())
// return merge(pluginSass)
.pipe(rename(function (file) {
var temp = path.dirname(file.dirname);
console.log('temp = ' + temp);
file.dirname = path.join(temp, "dist");
console.log("file.dirname = " + file.dirname);
}))
.pipe(cssmin())
// .pipe(autoprefixer())
.pipe(gulp.dest("wp-content/plugins"));
});
gulp-rename is useful for these situations and always seems to be easier to use that gulp.dest(function... path manipulation).
Pass the dist folder to the gulp.dest function.
const path = require('path')
return merge(pluginSass)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest(function (file) {
return path.join(file.base, './dist') // ← Put your folder path here
}));
See docs here: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpdestpath-options
The code bellow doesn't merge correctly rev-manifest.json file.
I loop several JS tasks and just one is merged, although hash files are being created and stored correctly.
I already tried a ton of things, I checked gulp-rev and some users seam to have similar problems. Some of them are creating several manifest files and proceed with the actual merge at the end. I would like to discard this solutions since it's slow and ugly.
If I comment the concat(...) line the manifest file registers all the JS tasks.
Is this a BUG or am I missing something here?
gulp 3.9.1
gulp-concat 2.6.0
gulp-rev 7.0.0
var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rev = require('gulp-rev');
var jsFiles = {
task1: [
'./path/file1.js'
],
task2: [
'./path/file2.js',
'./path/file2.js'
]
};
function jsTask(key) {
gulp.task(key, function() {
gulp.src(jsFiles[key])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
// IT WORKS WHEN I COMMENT THIS LINE
.pipe(concat(key + '.min.js'))
.pipe(rev())
.pipe(gulp.dest('./public/js'))
.pipe(rev.manifest({merge:true }))
.pipe(gulp.dest('.'));
});
}
gulp.task('less', function() {
return gulp.src(['./path/less/*.less'])
.pipe(less({errLogToConsole: true}))
.pipe(minifycss())
.pipe(rev())
.pipe(gulp.dest('./path/public/css'))
.pipe(rev.manifest({merge:true }))
.pipe(gulp.dest('.'));
});
for (var key in jsFiles) {
jsTask(key);
}
var defaultTasks = ['less'];
for (var key in jsFiles) {
defaultTasks.push(key);
}
gulp.task('default', defaultTasks);
You can pass the name of the manifest file you want to create(different for each gulp task) to manifest function of the gulp-rev-all module like below
gulp.task('productionizeCss', function () {
return gulp
.src(['dist/prod/**/*.css'])
.pipe(revAll.revision({
fileNameManifest: 'css-manifest.json'
}))
.pipe(gulp.dest('dist/prod/'))
.pipe(revAll.manifestFile())
.pipe(gulp.dest('dist/prod/'));
});
gulp.task('productionizeJS', function () {
return gulp
.src(['dist/prod/**/*.js'])
.pipe(revAll.revision({
fileNameManifest: 'js-manifest.json'
}))
.pipe(gulp.dest('dist/prod/'))
.pipe(revAll.manifestFile())
.pipe(gulp.dest('dist/prod/'));
});
Here, I have two gulp tasks, one to revise all JS and one for CSS.So, I have created two manifest files css-manifest.json, js-manifest.json.
Then I specified both the manifest files in src of the rev-replace module as shown below:
gulp.task('revReplaceIndexHtml', function () {
var manifest = gulp.src(["dist/prod/js-manifest.json", 'dist/prod/css-manifest.json']);
return gulp.src('dist/dev/referralswebui/index.html')
.pipe(revReplace({ manifest: manifest, replaceInExtensions: ['.html']}))
.pipe(gulp.dest('dist/prod/referralswebui/'));
});
I would suggest using gulp-useref instead of gulp-concat.
Given your setup, I think key references a glob path, or at least I hope so. Otherwise you are trying to concatenate a single file, or no files which may crash the concat plug-in. Emphasis on may.
Also, since you are using gulp-rev, I suggest using gulp-rev-replace which will automatically update your index references to the reved files.
Edit
Sometimes rev.manifest behaves in ways that I would describe as buggy. Just to exhaust all possibilities remove the merge option for the manifest and run concat. Or run concat and remove manifest altogether.
I am a newbie to gulp. I am trying to create one single vendor.css file and vendor.js file with gulp.
The vendor.css should be
-bootstrap.css
The vendor.js should be
-jquery.js
-bootstrap.js
-angular.js
-angular-ui-router.js
gulpfile.js
// Include Gulp
var gulp = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/
});
// Define default destination folder
var dest = 'public';
gulp.task('vendorjs', function(){
var filterJS = plugins.filter('**/*.js');
return gulp.src('./bower.json')
.pipe(plugins.mainBowerFiles( ))
.pipe(filterJS)
.pipe(plugins.concat('vendor.js'))
.pipe(plugins.uglify())
.pipe(filterJS.restore())
.pipe(gulp.dest(dest+"/vendor/js/"));
});
gulp.task('vendorcss', function(){
var filterCSS = plugins.filter('**/*.css');
return gulp.src('./bower.json')
.pipe(plugins.mainBowerFiles( ))
.pipe(filterCSS)
.pipe(plugins.concat('vendor.css'))
.pipe(plugins.uglify())
.pipe(filterCSS.restore())
.pipe(gulp.dest(dest+"/vendor/css/"));
});
gulp.task('default', function() {
// place code for your default task here
});
gulp.task('serve', ['vendorcss','vendorjs'], function () {
});
When i run gulp serve, it executes without error. But I end up with
public/vendor/css/angular/angular.js
public/vendor/css/angular-ui-router/release/angular-ui-router.js
public/vendor/css/bootstrap/dist/js/bootstrap.js
public/vendor/css/bootstrap/less/bootstrap.less
public/vendor/css/jquery/dist/jquery.js
public/vendor/js/vendor.js
public/vendor/js/bootstrap/less/bootstrap.less
Why do my css files are missing. Why do i get less file.
My output should be
public/vendor/vendor.js
public/vendor/vendor.css
How do i map the vendor.js and vendor.css with my html
I'm having issues using gulp-assemble with gulp-watch. I want gulp to watch the entire assemble source directory (data, includes, layouts and pages) and recompile the site when ever a file changes.
I'm able to get this working correctly for pages, but gulp is not recompiling the site when changes are made to the data, includes or layouts files.
I've added a watch task to the example gulpfile.js in the gulp-assemble repository:
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var middleware = require('./examples/middleware');
var gulpAssemble = require('./');
// setup items on the assemble object
assemble.data({site: {title: 'Blog'}});
assemble.data(['test/fixtures/data/*.{json,yml}']);
assemble.layouts(['test/fixtures/layouts/*.hbs']);
assemble.partials(['test/fixtures/includes/*.hbs']);
// arbitrary middleware that runs when files loaded
assemble.onLoad(/index\.hbs/, middleware(assemble));
// render templates in `test/fixtures`
gulp.task('default', function () {
gulp.src('test/fixtures/pages/*.hbs')
.pipe(gulpAssemble(assemble, { layout: 'default' }))
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(extname())
.pipe(gulp.dest('_gh_pages/'));
});
// ============================================================
// my watch task
// ============================================================
gulp.task('watch', ['default'], function() {
gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']);
});
If I run gulp watch and save a change to any of the .hbs files in the pages directory, I see gulp trigger the default in my terminal output, and I see the .html file in _gh_pages update with the change.
However, if I save a change to any of the .hbs, .json, or .yml files in the data, includes or layouts directories, I see gulp trigger the default in my terminal output, but I see no changes to the _gh_pages .html file(s). I have to run the gulp default task manually in order to get the changes applied to the _gh_pages files.
What do I need to change in order to get the desired behaviour?
gulp-watch will only execute code inside the function for the default task, so to get things like data and layouts to reload, you'll need to move those pieces of code to inside the function (Just before gulp.src).
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var middleware = require('./examples/middleware');
var gulpAssemble = require('./');
// arbitrary middleware that runs when files loaded
assemble.onLoad(/index\.hbs/, middleware(assemble));
// render templates in `test/fixtures`
gulp.task('default', function () {
// setup items on the assemble object
assemble.data({site: {title: 'Blog'}});
assemble.data(['test/fixtures/data/*.{json,yml}']);
assemble.layouts(['test/fixtures/layouts/*.hbs']);
assemble.partials(['test/fixtures/includes/*.hbs']);
gulp.src('test/fixtures/pages/*.hbs')
.pipe(gulpAssemble(assemble, { layout: 'default' }))
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(extname())
.pipe(gulp.dest('_gh_pages/'));
});
// ============================================================
// my watch task
// ============================================================
gulp.task('watch', ['default'], function() {
gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']);
});