While running gulp sass
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
/* Setup scss path */
var paths = {
scss: './assets/sass/*.scss'
};
/* Sass task */
gulp.task('sass', function () {
gulp.src('assets/scss/main.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss'].concat(neat)
}))
.pipe(gulp.dest('assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
I get error " ReferenceError: neat is not defined". Since "neat" is not defined variable. It should be replaced.
Any help is much appreciated.
includePaths: ['scss'].concat(neat)
where did you defined neat variable ??
var neat = require('node-neat').includePaths;
and then
includePaths: ['styles'].concat(neat)
maybe
var neat = require('node-neat').includePaths;
and then
includePaths: ['styles'].concat(neat)
??
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('path/to/input.scss')
.pipe(sass({
// includePaths: require('node-neat').with('other/path', 'another/path')
// - or -
includePaths: require('node-neat').includePaths
}))
.pipe(gulp.dest('path/to/output.css'));
});
the doc on https://github.com/sass/node-sass
say
includePaths
Type: Array<String>
Default: []
An array of paths that LibSass can look in to attempt to resolve your
#import declarations. When using data, it is recommended that you use
this.
so this whould work ??
var path = require('path');
gulp.task('sass', function () {
gulp.src('assets/scss/main.scss')
.pipe(plumber())
.pipe(sass({
includePaths: [path.resolve('./assets/sass')]
}))
.pipe(gulp.dest('assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
Related
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?
I am following a tutorial on react that requires gilp. The gulpfile.js used in the tutorial is based on an older version of Gulp. I am trying to convert it to V4 but am not having much luck.
I want to ensure the code is correct and am finding that the changes that I add in make parts work, but I'm sure there is a better way to convert it. This is the original code provided in the tutorial:
'use strict';
//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
///////////////
// - SCSS/CSS
///////////////
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
// Compile SCSS
gulp.task('compile_scss', function(){
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
// Detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, [compile_scss]);
});
// Run tasks
gulp.task('default', ['watch_scss']);
All I am looking for is the correct way to convert the above into a gulp v4 version
I was able to figure it out. However, I am not sure it is the most optimized code:
'use strict';
//dependencies
const gulp = require('gulp');
const sass = require('gulp-sass');
const minifyCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const changed = require('gulp-changed');
///////////////
// - SCSS/CSS
///////////////
// Compile SCSS
function scss() {
return gulp.src('./src/Assets/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed('./src/Assets/css'))
.pipe(gulp.dest('./src/Assets/css'))
}
// Watch files
function watchFiles() {
gulp.watch('./src/Assets/scss/**/*.scss', scss);
}
exports.default = watchFiles;
I started creating my own working enviroment for my personal website using gulp.js until I stumbled across an error I can't seem to solve.
Here is my my code:
(Note that I am pretty sure the error is in my 'sassCompile' task)
/**
* Initialize all gulp plugins
*/
var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var browserSync = require('browser-sync').create();
var autoPrefixer = require('autoprefixer');
var plumber = require('gulp-plumber');
var sourceMaps = require('gulp-sourcemaps');
/**
* Launch browsersync
*/
gulp.task('sync', ['sassCompile', 'pugCompile'], function(){
browserSync.init({
server: {
baseDir: './'
}
});
});
/**
* Compile sass and css files into css so the browser can read them.
*/
gulp.task('sassCompile', function() {
gulp.src('src/sass/*.scss')
.pipe(plumber())
.pipe(sourceMaps.init())
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoPrefixer('last 2 versions', {cascade: true}))
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}));
});
/**
* Compile pug files into html so the browser can read them.
*/
gulp.task('pugCompile', function() {
gulp.src('src/pugfiles/*.pug')
.pipe(plumber())
.pipe(pug())
.pipe(gulp.dest('./HTML'))
});
This will result in this error:
TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (C:\Users\lucas\Desktop\Portfolio\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:564:8)
at DestroyableTransform.pipe2 (C:\Users\lucas\Desktop\Portfolio\node_modules\gulp-plumber\index.js:72:14)
at Gulp.<anonymous> (C:\Users\lucas\Desktop\Portfolio\gulpfile.js:37:7)
at module.exports (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:134:8)
at C:\Users\lucas\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickCallback (internal/process/next_tick.js:181:9)
My directory:
Directory
If any other info is necessary I'll make sure to give it.
I think this is because autoprefixer does not return a stream.
Try using gulp-autoprefixer instead:
var autoprefixer = require('gulp-autoprefixer');
...and pass it an object for the options:
// ...
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: true
}))
https://www.npmjs.com/package/gulp-autoprefixer
I have the following problem and don't know whats going wrong with my gulpfile. Everything is working fine and my sass files are being compiled and the browser refreshed when changing something.
But if I add a new partial file and import it into my _base.scss, browsersync is only recognizing the change in that partial and is not compiling the whole sass file & reloading the browser. Does anyone know how to solve this problem? I could not figure out a good solution.
Thanks!
Here's my gulpfile.js
/*=============================================>>>>>
= gulpfile - all the gulptasks are here =
===============================================>>>>>*/
/*----------- variables -----------*/
// gulp
var gulp = require('gulp');
// css stuff
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var cssnext = require('postcss-cssnext');
var lost = require('lost');
var csswring = require('csswring');
// javascript
var babel = require('gulp-babel');
// jade
var jade = require('gulp-jade-php');
// browser sync
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/*----------- tasks -----------*/
// style task
gulp.task('styles', function(){
var processors = [
autoprefixer,
cssnext,
lost,
csswring
];
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/'))
.pipe(reload({stream: true}));
;
});
// javascript task
gulp.task('javascript', function(){
return gulp.src('./js/*.js')
.pipe(babel())
.pipe(gulp.dest('./js/dist/'))
.pipe(reload({stream: true}));
});
// jade task
gulp.task('jade', function(){
return gulp.src('./jade/*.jade')
.pipe(jade())
.pipe(gulp.dest('./templates/'))
.pipe(reload({stream: true}));
});
// browser sync
gulp.task('browserSync', function(){
var files = [
'./scss/**/*.scss',
'./css/style.css',
'./*.php',
'./templates/**/*.php',
'./js/*js',
'./jade/*jade'
];
browserSync.init(
files, {
proxy : 'localhost:8888/jobs/heisaplan/',
});
});
// watching the files for changes
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('./js/*.js', ['javascript']).on('change', browserSync.reload);
gulp.watch('./jade/**/*.jade', ['jade']).on('change', browserSync.reload);
gulp.watch('./templates/**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
// default gulp task
gulp.task('default', ['watch', 'browserSync', 'styles', 'javascript', 'jade']);
I'm trying to setup a Gulp task that converts Sass into CSS and then minifies it.
Here's my current gulpfile.js
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass','minify-css']);
});
I run gulp sass:watch and I expect it to convert main.scss into main.css which it does and then I see that it also runs minify-css, but it doesn't actually minify it.
If I run gulp minify-css, it works perfectly. Can someone please tell me how this needs to be adjusted so gulp.watch runs both tasks, one after another?
Thank you
Looks like I got this work, by removing the additional task and combining the css minify into the sass portion.
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('./css'));
});
// gulp.task('minify-css', function() {
// return gulp.src('css/*.css')
// .pipe(minifyCss({compatibility: 'ie8'}))
// .pipe(gulp.dest('css'));
// });
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass']);
});