I need to export my ejs templates to html files in a separate "dist" folder at the root of my project. I do have gulp-ejs installed and have the following setup in my gulpfile.js, but it is not creating the folder and compiling the html files to it:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssbeautify = require('gulp-cssbeautify'),
ejs = require('gulp-ejs');
gulp.task('styles', function(){
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/')
);
});
gulp.task('css', function(){
return gulp.src('./styles/*.css')
.pipe(cssbeautify({
indent: ' ',
openbrace: 'end-of-line',
autosemicolon: true
}))
.pipe(gulp.dest('./styles/'));
});
gulp.task('ejs', function(){
return gulp.src('./views/pages/*.ejs')<----SHOULD GRAB ALL EJS PAGES
.pipe(ejs({}, {ext:'.html'})) <-----ADD EXTENSION OF .HTML
.pipe(gulp.dest('./dist')) <-----AND EXPORT THEM TO THE DIST FOLDER
});
//Watch
gulp.task('default', function(){
gulp.watch('sass/**/*.scss',['styles','css','ejs']);
});
Also, my directory structure is as follows:
-css
-node_modules
-routes
-sass
-views
|-pages
|-about.ejs
|-index.ejs
|-partials
|-head.ejs
|-nav.ejs
-gulpfile.js
-package.json
-server.js
I think you should add another {} to ejs parameters.
ejs(data,option,settings)
gulp.task('ejs', function(){
return gulp.src('./views/pages/*.ejs')<----SHOULD GRAB ALL EJS PAGES
.pipe(ejs({},{}, {ext:'.html'})) <-----ADD EXTENSION OF .HTML
.pipe(gulp.dest('./dist')) <-----AND EXPORT THEM TO THE DIST FOLDER
});
This is how I do it and it works for me. (using gulp-ejs 3.0.0)
https://github.com/mde/ejs & https://github.com/rogeriopvl/gulp-ejs
Related
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
I'm using a build environment with Jekyll + Gulp. So, using the gulpfile.js below, the build process generate first a dist/css folder with the compiled css inside, and then clear the entire dist folder for put the jekyll build result inside. So, i'm not able to compile the scss files inside the dist folder because every time jekyll it completely clear it.
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var child = require('child_process');
gulp.task('jekyll', function (done) {
return child.spawn('jekyll' , ['build']).on('close', done);
});
gulp.task('jekyll-rebuild', ['jekyll'], function () {
browserSync.reload();
});
gulp.task('browser-sync', ['sass', 'jekyll'], function() {
browserSync({
server: {
baseDir: 'dist'
}
});
});
gulp.task('sass', function () {
return gulp.src('src/_sass/theme.scss')
.pipe(sass({
includePaths: ['scss'],
onError: browserSync.notify
}))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('watch', function () {
gulp.watch('src/_sass/*.scss', ['sass']);
gulp.watch(['src/*.html', 'src/_layouts/*.html', 'src/_includes/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['browser-sync', 'watch']);
I have to avoid running jekyll task in parallel with styles and scripts so I have used a runSequence.
gulp.task('build', () => {
runSequence('jekyll', ['styles', 'scripts']);
});
gulp.task('default', ['build', 'browser-sync', 'watch']);
In your Jekyll config you need to declare which folders you want to keep:
keep_files: [ css, build ]
When clobbering the site destination, keep the selected files. Useful for files that are not generated by jekyll; e.g. files or assets that are generated by your build tool. The paths are relative to the destination.
https://jekyllrb.com/docs/configuration/
I'm trying to get gulp to compile my SASS files and output them to the same source dir however I haven't been able to get it to work properly, I've tried using the base option:
gulp.task('sass_modules', function() {
return gulp.src('Application/modules/**/*.scss', {base: '.'})
.pipe(sassInheritance({dir: 'Application/modules/'}))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'));
});
With the above code, it just outputs to the app root dir, the current working directory, any ideas how I can get this to work? An example of how I want it to work is to have a Application/modules/frontend/static/css/main.scss file, and have that compiled to Application/modules/frontend/static/css/main.css and Application/modules/frontend/static/css/main.css.map.
Using this directory structure
Application
│
├─── gulpfile.js
└─┬─ modules
└─┬─ frontend
└─┬─ static
└─┬─ css
└─── main.scss
gulpfile.js
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var scssFiles = 'modules/**/*.scss';
gulp.task('sass_modules', function() {
return gulp.src(scssFiles)
.pipe(sourcemaps.init())
.pipe(sass()
.on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'));
});
In my project structure I have app folder for development, I would like to move the .html files and the content of /css to a folder above it called /dist.
In my gulp tasks I tried this:
gulp.task('prod', function() {
gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
});
This didn't work out. The only way was to create two different tasks:
gulp.task('prod_html', function() {
return gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
});
gulp.task('prod_css', function() {
return gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
});
But this seems to be the bad practice to create servera different tasks in the end; one for the html files, then for /css and /js and /images
cheers
Sohail
I ended up using merge-stream :)
npm install --save-dev gulp merge-stream
Then:
var merge = require('merge-stream');
gulp.task('prod', function() {
var html = gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
var css = gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
return merge(html, css);
});
and put in my default tasks :)
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