I have gulpfile.js from https://github.com/gulpjs/gulp.
I just change folders name for mine.
Task 'gulp' work normally, first 'gulp watch' too. But any another save any less file don't do anything. Just "Finished 'styles' after 1.34 s"
(JS works good)
Any advice?
main.less have less imports with all filles
Folders looks like:
/www
/js
/css
main.less
file.less
file2.less
/lib
file3.less
var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');
var paths = {
styles: {
src: 'www/css/main.less',
dest: 'www/css/'
},
scripts: {
src: 'www/js/js/**/*.js',
dest: 'www/js/'
}
};
function clean() {
return del([ 'assets' ]);
}
function styles() {
return gulp.src(paths.styles.src)
.pipe(less())
.pipe(cleanCSS())
// pass in options to the stream
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}
function scripts() {
return gulp.src(paths.scripts.src, { sourcemaps: true})
.pipe(babel())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
}
function watch() {
gulp.watch("www/js/js**/*.js", scripts);
gulp.watch("www/css/**/*.less", styles);
}
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
var build = gulp.series(clean, gulp.parallel(styles, scripts));
gulp.task('build', build);
gulp.task('default', build);
As #Jakub thought, you never actually call your watch task in the code you presented! You probably want something like this:
var build = gulp.series(clean, gulp.parallel(styles, scripts), watch);
Related
I have the following folder structure:
theme
assets
build
css
style.css
src
theme
buttons.scss
style.scss
components
hero
hero.html
hero.scss
index.html
Any changes in src theme and any scss file for a component (i.e. hero.scss) should all compile into style.css.
My theme files compile correctly, but my component scss files don't appear in style.css.
Instead, when I run gulp css, a separate css file appears under the build folder, i.e.
build
css
style.css
hero.css
How can I get it to compile everything into style.css?
gulpfile.js
const assetsSRC = 'assets/src/',
assetsDST = 'assets/build/',
components = 'components/';
const gulp = require('gulp'),
sass = require('gulp-sass')(require('sass')),
sourcemaps = require('gulp-sourcemaps'),
fs = require('fs'),
path = require('path'),
merge = require('merge-stream'),
postcss = require('gulp-postcss'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
strip = require('gulp-strip-comments');
const componentCSS = components + '**/*.scss',
componentJS = components + '**/*.js',
globalCSS = assetsSRC + 'scss/style.scss';
configCSS = assetsSRC + 'scss/config/**.scss';
themeCSS = assetsSRC + 'scss/theme/**.scss';
globalJS = assetsSRC + 'js/*.js';
libJS = assetsSRC + 'js/lib/*.js';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed'
};
function getFolders(dir) {
return fs.readdirSync(dir).filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
function css() {
var folders = getFolders(components);
var tasks = folders.map(function(folder) {
var src = path.join(components, folder);
var dst = path.join(assetsDST + 'css');
return gulp.src(path.join(src, '/**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
return merge(tasks);
}
function mainCSS() {
var dst = path.join(assetsDST + 'css/');
return gulp.src(globalCSS, { allowEmpty: true })
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
}
function libraryJS() {
var dst = path.join(assetsDST + 'JS/lib');
return gulp.src(libJS).pipe(gulp.dest(dst));
}
function watch() {
gulp.watch([globalCSS,configCSS,themeCSS, componentCSS],mainCSS);
}
exports.mainCSS = mainCSS;
exports.mainJS = mainJS;
exports.libraryJS = libraryJS;
exports.css = css;
exports.javascript = javascript;
exports.watch = watch;
const build = gulp.series(watch);
gulp.task('default', build);
Edit
Attempt using gulp-sass-glob:
function css() {
gulp.task('styles', function () {
var src = path(components);
return gulp
.src(src, '/**/*.scss')
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(sass())
.pipe(gulp.dest(assetsDST + 'css'));
});
}
Re-ran gulp watch (no errors). Made a change and saved hero.scss. Then went into style.css to find css that has been compiled from hero.scss - nothing shows. scss not compiled into style.css
Edit 2
I have the following:
function css() {
var folders = getFolders(components);
var tasks = folders.map(function(folder) {
var src = path.join(components, folder);
var dst = path.join(assetsDST + 'css/');
return gulp.src(path.join(src, '**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
return merge(tasks);
}
This is creating individual css files (rather than collating into style.css). I think this one is close, but unsure how to proceed.
Have you tried gulp-sass-glob?
https://www.npmjs.com/package/gulp-sass-glob
I'm currently attempting to use Tailwind CSS with gulp and purgeCSS in a WordPress project.
Everything runs as expected and the CSS files are compiling however certain classes don't make it into the compiled CSS no matter how they're used in the markup.
For example, the background color classes, i.e. "bg-white" are included in various theme files, but whenever the CSS recompiles, that class is purged. It was the same with the "margin-top" classes, but not any of the other margin classes.
Here is my gulp file:
var postcss = require('gulp-postcss');
var cssImport = require('postcss-import');
var gulp = require('gulp');
var cssvars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var purgecss = require('gulp-purgecss')
var sass = require('gulp-sass');
var gcmq = require('gulp-group-css-media-queries');
var uglify = require('gulp-uglify-es').default;
var del = require('del');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
var babel = require('gulp-babel');
// ============================================================================
// Main Tasks
// ============================================================================
// Default task is build
gulp.task('default', ['build']);
// Development task (watch alias)
gulp.task('dev', ['watch']);
// Build task
gulp.task('build', ['clean'], function() {
gulp.start(['styles', 'scripts']);
});
// Styles task
gulp.task('styles', function() {
return gulp.src([
'./assets/sass/*.scss'
])
.pipe(sass().on('error', sass.logError))
// .pipe(sourcemaps.init())
.pipe(postcss([
require('postcss-import'),
require('tailwindcss'),
autoprefixer(),
// cssnano()
], {
syntax: require('postcss-scss')
}))
.pipe(purgecss({
content: ['./*.php', './templates/*.php', './partials/*.php', './components/*.php'],
extractors: [
{
extractor: content => {
return content.match(/[A-Za-z0-9-_:\/]+/g) || []
// return content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
// return content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
//return content.match(/[\w-/:]+(?<!:)/g) || [];
},
extensions: ['css', 'php', 'html']
}
],
safelist: {
standard: [/^[^-]*mt-*/, /^[^-]*bg-opacity-*/, /^[^-]*bg-white/]
}
}))
.pipe(gulp.dest('./assets/css/'))
});
// Scripts task
gulp.task('scripts', function() {
return gulp.src([
'./node_modules/mmenu-light/dist/mmenu-light.js',
'./node_modules/mmenu-light/dist/mmenu-light.polyfills.js',
'./assets/js/util-scripts.js',
'./assets/vendors/micromodal/micromodal.min.js',
'./assets/vendors/waypoints/lib/jquery.waypoints.js',
'./assets/js/core-js.js',
'./assets/js/theme-js.js'
])
// .pipe(sourcemaps.init())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(concat('theme-js.dist.js'))
.pipe(uglify())
// .pipe(sourcemaps.write())
.pipe(gulp.dest('./assets/dist/js/'))
});
// ============================================================================
// Build Tasks
// ============================================================================
/**
* Clean directories
*
* #since 0.1.0
*/
gulp.task('clean', function() {
del([
'./assets/css/*.css',
'!./assets/css/font-awesome.min.css',
'./assets/js/*.dist.js'
]);
});
// END BUILD
// ============================================================================
// Dev Tasks
// ============================================================================
/**
* Execute tasks when files are change and live reload web page, and servers
*
* #since 0.1.0
*/
gulp.task('watch', function() {
gulp.watch('./assets/sass/**/*.scss', ['styles']);
gulp.watch('./assets/js/*.js', ['scripts']);
// gulp.watch('./assets/images/*', ['images']);
gulp.watch("*.html", ['bs-reload']);
});
I also tried a variety of extractor regex matches, but none of them seem to work.
Oddly enough, when I add this into the theme configuration of my tailwind.config.js file the background class does compile
backgroundColor: {
'white': '#fff'
},
It seems the vast majority of classes are compiling though so unsure if it's my purgeCSS configuration or some other configuration that I'm missing in tailwind?
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
/project
--> Module1
--> scss
--> Test1.scss
--> Module2
--> scss
--> Test2.scss
Click here for folder structure
I have a project with multiple modules. I'm trying to write a gulp task that compiles the sass files and creates css files within each module. I have the following folder structure and gulpfile.
The task is currently designed to compile the scss files and create the css and css.map files in the same location as the scss files.
How can I move them both outside the scss folder, but still inside their respective modules?
You can add a config file to specify the build location for the files so that they can be generated in a folder of your choice, like so:
let gulp = require('gulp');
let sass = require('gulp-sass');
let sourcemaps = require('gulp-sourcemaps');
let rename = require('gulp-rename');
let gulpUtil = require('gulp-util');
let merge = require('merge-stream');
const CONFIGS = [require('./gulp.module1.config'), require('./gulp.module2.config')];
gulp.task('sass', function () {
let tasks = CONFIGS.map(config => {
return gulp.src(config.sass.src)
.pipe(sass())
.on('error', error => console.log(error))
.pipe(rename('app.min.css'))
.pipe(gulp.dest(config.buildLocations.css));
});
return merge(tasks);
});
Config 1:
module.exports = {
app: { baseName: 'module1' },
sass: {
src: ['./project/module1/scss/*.scss']
},
buildLocations: {
css: './project/module1/'
}
}
config 2
module.exports = {
app: { baseName: 'module1' },
sass: {
src: ['./project/module2/scss/*.scss']
},
buildLocations: {
css: './project/module2/'
}
}
Folder Structure
UPDATE: If you don't want to write an individual config file you can use the path library to rename it, leaves you with the files on the parent level.
gulp.task('sass', function () {
return gulp.src('./project/**/scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(rename(function(file) {
file.dirname = path.dirname(file.dirname)
return file;
}))
.pipe(gulp.dest('./project'))
});
gulp-flatten is really handy for selecting which directories to include or exclude from the final structure.
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var flatten = require("gulp-flatten");
gulp.task('sass', function () {
return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
// keep one parent directory: "Module1", "Module2"
// relative to your glob bae, so first after "project"
.pipe(flatten({ includeParents: 1}))
.pipe(gulp.dest('project'));
});
I have implementing gulp task in the project.
I have installed gulp-assests-version-replace to make version control file of css file.
Now I want to run above task after creating the app.css. It runs before creating the app.css, so version control file cannot be created.
Below is the gulp-file for running the gulp tasks.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var del = require('del');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var assetsVersionReplace = require('gulp-assets-version-replace');
var uglify = require('gulp-uglify');
var path = {
assets: 'skin/frontend/custom_theme/default/'
};
var config = {
tasks: {
css: {
autoprefixerOptions: {
// For "browserslist" see "package.json"
cascade: false,
supports: false // See: https://github.com/filamentgroup/select-css/issues/17
},
dest: path.assets + 'css/build',
sassOptions: {
outputStyle: 'compressed'
},
src: path.assets + 'css/src/**/*.scss'
},
version: {
autoprefixerOptions: {
// For "browserslist" see "package.json"
cascade: false,
supports: false // See: https://github.com/filamentgroup/select-css/issues/17
},
dest: path.assets + 'css/build',
sassOptions: {
outputStyle: 'compressed'
},
src: path.assets + 'css/build/app.css'
}
}
}
gulp.task('default', ['clean'], function () {
gulp.start('css');
gulp.start('assetsVersionReplace');
});
gulp.task('clean', function () {
return del([
path.assets + 'css/build',
path.assets + 'js/build',
path.assets + 'js/min',
path.assets + 'img/build'
]);
});
gulp.task('css', function () {
return gulp.src(config.tasks.css.src)
.pipe(plumber({
errorHandler: reportError
}))
.pipe(sass(config.tasks.css.sassOptions))
.pipe(autoprefixer(config.tasks.css.autoprefixerOptions))
.pipe(gulp.dest(config.tasks.css.dest));
});
gulp.task('assetsVersionReplace', function () {
return gulp.src(config.tasks.version.src)
.pipe(assetsVersionReplace({
replaceTemplateList: [
'app/design/frotend/custom_theme/default/template/page/head.phtml'
]
}))
.pipe(gulp.dest(config.tasks.version.dest))
});
gulp.task('watch', function () {
// Run "default" immediately
gulp.start('default');
// CSS
gulp.watch(config.tasks.css.src, ['css']);
gulp.watch(config.tasks.version.src, ['assetsVersionReplace']);
});
How can I run assetsVersionReplace task after creating the css (or after runnung 'CSS' task)?
Either change
gulp.task('assetsVersionReplace', function () {
to
gulp.task('assetsVersionReplace', ['css'], function () {
or, if that isn't an option, add a helper task
gulp.task('assetsVersionReplaceAfterCss', ['css'], function () {
gulp.start('assetsVersionReplace');
}
and use that instead
Why don't you use gulp series.
gulp.task('default',
gulp.series(
'css',
'assetsVersionReplace'
)
);
I currently have a file structure like this
projects
sites
site-example
css
scss
site-second-example
css
scss
site-third-example
css
scss
***
site-fifty-example
css
scss
I'm trying to write a gulp task that I can run from the projects folder that will look inside the sites folder, and then go through each folder separately, look for any scss files, and then compile them to css.
I tried to follow this recipe but I must be messing it up somehow:
https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var output = './**/css';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
var scriptsPath = './sites';
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
gulp.task('sass', function() {
var processors = [
autoprefixer({
browsers: ['last 12 versions']
})
];
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(output));
});
return merge(tasks);
});
You can't put a globstar ** in your destination directory like this:
var output = './**/css';
That won't work, because gulp.dest() can't magically guess from context which directory you want your files to end up in.
You have to explicitly construct a destination directory for each folder returned from getFolders(), just as you do for gulp.src():
var tasks = folders.map(function(folder) {
var src = path.join(scriptsPath, folder, 'scss');
var dst = path.join(scriptsPath, folder, 'css');
return gulp.src(path.join(src, '**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(dst));
});