After i run my task to copy the fonts from the bower_component, the browser seems to be confused with the correct path.
This is the gulp task for fonts:
// Fonts
gulp.task('fonts', function() {
return gulp.src(bowerDir + '/open-sans-fontface/fonts/**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
.pipe(gulp.dest(dest + 'fonts'));
});
And this is the gulp task for styles:
// Styles
gulp.task('styles', function() {
return plugins.sass(src + 'styles/main.scss', {
style: 'expanded',
loadPath: [
// './resources/sass',
bowerDir + '/bootstrap-sass/assets/stylesheets',
bowerDir + '/font-awesome/scss',
bowerDir + '/open-sans-fontface'
]
})
.pipe(plugins.autoprefixer('last 2 version'))
.pipe(gulp.dest(dest + 'styles'))
.pipe(plugins.rename({ suffix: '.min' }))
.pipe(plugins.cssnano())
.pipe(gulp.dest(dest + 'styles'))
.pipe(reload({stream: true}));
// .pipe(plugins.notify({ message: 'Styles task complete' }));
});
How do i adjust the gulp file, so the created css-file looks for the right path?
You can use gulp-replace. Example:
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(plugins.sass())
.pipe(plugins.replace('original-path/fonts/', 'new-path/fonts/'))
.pipe(gulp.dest('dist'));
});
If e.g. bootstrap had it's fonts under original-path/fonts/ that path would now be replaced with new-path/fonts/ after the styles task is run.
Related
I am developing my own themes for WordPress, I came to know about Glup and how easy it made my workflow, the problem I am facing with my below code is I am able to see the immediate changes I am making to the main page (html or php) but any changes I am making to the css files or the java-script files is not effected at all, still I have to manually refresh the page:
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function(done) {
browserSync.reload();
done();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
Try this:
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation))
// added below
.pipe(browserSync.stream());
});
// now this task is unnecessary:
// gulp.task('waitForStyles', gulp.series('styles', function() {
// return gulp.src(settings.themeLocation + 'style.css')
// .pipe(browserSync.stream());
// }))
// cb added, called below
gulp.task('watch', function(cb) {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function(done) {
browserSync.reload();
done();
});
// change to gulp.series below
// gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('waitForStyles'));
// changed to 'styles' below
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts'));
cb();
});
I have seen gulp4 have trouble with just a single task ala gulp.parallel('oneTaskHere'), so try swapping parallel with series in your watch statements as above code.
I made some edits to simplify the code - give it a try. No need for 'waitForStyles', just move the browserSync.stream() pipe to the end of the styles task.
Or instead of moving the browserSync.stream pipe, just do this:
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles', browserSync.reload));
but I seem to have better luck with the browserSync pipe at the end of the 'styles' task version myself.
Because you are using webpack plugin I assume the scripts task have to be handled differently from the styles task. You might try :
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts', browserSync.reload));
and then no need for 'waitForScripts' task.
How do you concat multiple Less files?
For instance, I have functions.less with all the functions that I want to use them in the style.less:
functions.less:
.rotate (#deg) {
-webkit-transform: rotate(#deg * 1deg);
-moz-transform: rotate(#deg * 1deg);
-ms-transform: rotate(#deg * 1deg);
-o-transform: rotate(#deg * 1deg);
}
style.less:
.button {
.rotate (#deg: 90);
}
gulpfile.js:
// Task to compile less.
gulp.task('compile-less', function () {
return gulp.src([
'stylesheets/*.less'
])
.pipe(sourcemaps.init())
.pipe(less())
.pipe(concat('compiled.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('stylesheets'))
})
// Task to minify css.
gulp.task('minify-css', function () {
return gulp.src([
'stylesheets/compiled.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS({debug: true}))
.pipe(concat('bundle.min.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
I will get:
Potentially unhandled rejection [2] No matching definition was found
for .rotate (#deg: 90) in file /var/www/.../style.less line no. 107
Any ideas?
EDIT:
I get this errors sometimes when I use #import:
undefined:1
SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at loadInputSourceMapFromLocalUri (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:177:15)
at extractInputSourceMapFrom (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:116:17)
at fetchAndApplySourceMap (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:79:10)
at doApplySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:57:14)
at applySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:33:5)
at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:25:12)
at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25)
at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:324:14)
at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25
EDIT 2:
Obviously it is gulp-clean-css that is causing the problem:
// CSS compilation.
var concat = require('gulp-concat')
var cleanCSS = require('gulp-clean-css')
var concatCss = require('gulp-concat-css') // optional
gulp.task('minify-css', function () {
return gulp.src([
'stylesheets/style.css'
])
.pipe(sourcemaps.init())
// .pipe(cleanCSS({debug: true}))
.pipe(concat('bundle.min.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
No error if I remove that line but then I does not minify the css anymore if I do.
Any ideas?
EDIT 3:
Entire content in gulpfile:
var gulp = require('gulp')
var sourcemaps = require('gulp-sourcemaps')
var livereload = require('gulp-livereload')
// JavaScript development.
var browserify = require('browserify')
var babelify = require('babelify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
// Less compilation.
var less = require('gulp-less')
// CSS compilation.
var concat = require('gulp-concat')
var cleanCSS = require('gulp-clean-css')
var concatCss = require('gulp-concat-css') // optional
// HTML compilation.
var htmlmin = require('gulp-htmlmin')
var path = require('path')
var foreach = require('gulp-foreach')
// Task to compile js.
gulp.task('compile-js', function () {
return browserify({
extensions: ['.js', '.jsx'],
entries: ['./javascripts/app.js'],
debug: true
})
.transform('babelify', {
presets: ['es2015', 'es2017', 'react'],
plugins: [
// Turn async functions into ES2015 generators
// https://babeljs.io/docs/plugins/transform-async-to-generator/
"transform-async-to-generator"
]
})
.bundle()
.pipe(source('bundle.min.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
// Task to compile less.
gulp.task('compile-less', function () {
return gulp.src([
'stylesheets/*.less'
])
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('stylesheets'))
})
// Task to minify css.
gulp.task('minify-css', function () {
return gulp.src([
'stylesheets/style.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS({debug: true}))
.pipe(concat('bundle.min.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
// Loop each html.
// https://www.npmjs.com/package/gulp-foreach
gulp.task('minify-html', function () {
return gulp.src('*.html')
.pipe(foreach(function(stream, file){
// Get the filename.
// https://github.com/mariusGundersen/gulp-flatMap/issues/4
// https://nodejs.org/api/path.html#path_path_basename_p_ext
var name = path.basename(file.path)
return stream
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(concat('min.' + name))
}))
.pipe(gulp.dest(''))
})
// Task to copy fonts to dist.
gulp.task('compile-fonts', function() {
return gulp.src([
'fonts/*',
'node_modules/material-design-icons/iconfont/MaterialIcons-Regular.*',
'node_modules/foundation-icon-fonts/foundation-icons.*',
])
.pipe(gulp.dest('dist/fonts/'))
})
// Task to copy images to dist.
gulp.task('compile-images', function() {
return gulp.src([
'images/*',
'node_modules/jquery-ui-bundle/images/*',
])
.pipe(gulp.dest('dist/images/'))
})
// Task to watch less & css changes.
gulp.task('watch', function () {
gulp.watch('javascripts/*.js', ['compile-js']) // Watch all the .js files, then run the js task
gulp.watch('stylesheets/*.less', ['compile-less']) // Watch all the .less files, then run the less task
gulp.watch('stylesheets/*.css', ['minify-css']) // Watch all the .css files, then run the css task
gulp.watch('stylesheets/*.css', ['compile-fonts']) // Watch all the .css files, then run the font task
gulp.watch('stylesheets/*.css', ['compile-images']) // Watch all the .css files, then run the image task
})
// Development:
// Task when running `gulp` from terminal.
gulp.task('default', ['watch'])
// Production:
// Task when running `gulp build` from terminal.
gulp.task('build', ['minify-css', 'compile-fonts', 'compile-js', 'minify-html'])
All you need to do is create a master less file and import all your less files.
So create, for example a file called master.less. Then edit this file by adding the follow instruction:
#import "functions.less";
#import "styles.less";
And thats it. Then the gulp-less does the rest!! :) It compiles al the code in one single css file.
My suggestion for your task is (this is the code i have in my project startup):
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
less = require('gulp-less'),
autoprefixer = require('autoprefixer');
concat = require('gulp-concat'),
cssnano = require('gulp-cssnano'),
browserSync = require('browser-sync');
gulp.task('less', function () {
var processors = [
autoprefixer,
cssnano
];
gulp.src(config.paths.less.src)
.pipe(less())
.pipe(postcss(processors))
.pipe(concat('bundle.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({stream:true}))
});
I am a beginner in WordPress. I am learning to build a WordPress theme using underscores. After typing "gulp" in the command line, http://192.168.1.104:8080/ is being opened in the browser. It continues to load, but ended up with this error:
This page isn’t working
192.168.1.104 didn’t send any data.
ERR_EMPTY_RESPONSE
Here is my gulp.js file:
var themename = 'kanonscores';
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'kanonscores.com',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
When I go inside "node_modules" of "gulp.dev" directory via NetBeans, I notice some errors in the folders of "browser-sync," "gulp" and "gulp-saas."
You can find the entire gulp.dev directory here:
https://drive.google.com/open?id=1HaFcW0dCMIH3t8Dyg8f8hcQwxfux0GnT
Should I attach the entire exercise files, including the WordPress files?
Try changing your gulp watch task proxy to 'localhost'
gulp.task('watch', function() {
browserSync.init({
proxy: 'localhost',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
My bad! I haven't launched WAMP. I am a poor beginner!
I am confused on where to edit WordPress themes. I am new to WordPress and have a custom theme which main style.css file just imports the style for this theme like this:
#import url('assets/stylesheets/app.css');
I read that it is recommended to make a new child theme, but I don't see the need for that in my case, since I would like to almost completely change the css of the theme, so there is no need to keep the original theme files. Since, I tried to modify the file 'assets/stylesheets/app.css' I couldn't see any changes in the browser. Can I edit the styles there, or I need to do it in the WP admin dashboard somewhere?
I would like to build my scripts with gulp, which I set up like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
var include = require('gulp-include');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var connect = require('gulp-connect');
var browserify = require('gulp-browserify');
var livereload = require('gulp-livereload');
var browsersync = require('browser-sync');
var config = {
srcDir: './assets',
styles: {
src: '/scss/app.scss',
dest: '/stylesheets',
includePaths: [
'node_modules/foundation-sites/scss'
],
prefix: ["last 2 versions", "> 1%", "ie 9"]
},
scripts: {
src: '/js/app.js',
dest: '/js'
},
img: {
src: '/images/**/*',
dest: '/images'
}
};
var srcDir = './src',
destDir = './build';
gulp.task('styles', function() {
return gulp.src(config.srcDir + config.styles.src)
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: config.styles.includePaths,
sourceMap: true,
outFile: config.srcDir + config.styles.dest + '/app.css',
outputStyle: 'compressed'
}))
.pipe(prefix(config.styles.prefix))
.pipe(sourcemaps.write())
.on('error', sass.logError)
.pipe(gulp.dest(config.srcDir + config.styles.dest))
.pipe(browsersync.reload({ stream: true }));
});
gulp.task('scripts', function() {
gulp.src(config.srcDir + config.scripts.src)
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.pipe(gulp.dest(config.srcDir + config.scripts.dest))
});
gulp.task('include', function() {
return gulp.src(config.srcDir + config.img.src)
.pipe(gulp.dest(config.srcDir + config.img.dest));
});
gulp.task('watch', function () {
// Watch .scss files
gulp.watch(config.srcDir + config.styles.src, ['styles']);
// Watch .js files
gulp.watch(config.srcDir + config.scripts.src, ['scripts']);
});
gulp.task('default', ['styles', 'scripts', 'watch']);
So, not sure how can I do it utilizing gulp. Where can I change the theme without creating the child theme?
Where does the import of "app.css" happen - at the beginning or at the end of the "style.css" file? If it's at the beginning, the changed rules in "app.css" might be overwritten by the following "style.css" rules.
I'd like to have the same gulpfile.js for my projects where I use a pre-compiler (sass) and for older/smaller projects in pure css.
Also I use browser-sync and I want to inject css into the browser (not reload the whole page).
My following configuration works, i.e. when I edit a sass file, it compiles and injects the compiled css, and when I edit a css file, it injects it correctly. But a little detail is still frustrating me : when I edit a sass file, browser-sync is notified 2 times that the css file has changed. 1 time in the sass watcher and 1 time in the css watcher. It doesn't seem to be a problem for him, since it correctly injects the css in my browser. But this is not very "clean".
I'd like to find a way to do some sort of exclusion for this. Ideally, just with a bit more logic in my coding, without the need to add some other packages like gulp-watch, gulp-if...
var gulp = require('gulp'),
rubySass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps'),
browsersync = require('browser-sync').create();
gulp.task('rubySass', function() {
return rubySass('sources/', {
style: 'expanded',
sourcemap: true
})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/sources'
}))
.pipe(gulp.dest('./css'))
.pipe(browsersync.stream({match: "**/*.css"}));
// If I remove this line, browser-sync is still notified 2 times
// (the console is still showing 2 times "[BS] 1 file changed (main.css)")
// but, moreover, the css is no longer injected : the whole page is reloading.
});
gulp.task('browsersync', function() {
browsersync.init({
server: './',
logConnections: true
});
});
gulp.task('default', ['rubySass', 'browsersync'], function (){
gulp.watch('**/*.html', browsersync.reload);
gulp.watch('**/*.php', browsersync.reload);
gulp.watch('js/**/*.js', browsersync.reload);
gulp.watch('**/*.css', function(file){
console.log("In gulp watch : css");
gulp.src(file.path)
.pipe(browsersync.stream());
});
gulp.watch('./sources/**/*.scss', ['rubySass']).on('change', function(evt) {
console.log("In gulp watch : sass");
});
});
Here's the console output, when saving a sass file :
As we can see, we enter successively in the 2 watchers and browser-sync is saying 2 times "[BS] 1 file changed (main.css)".
Since your SASS always compiles to .css you just need to watch for changes in your .css files. It will fire on SASS change anyway (because .css will be generated and gulp.watch triggered by this .css change). Otherwise you can use exclusions in gulp.watch() and use some kind of pattern (ex. subdirectory) to identify .css files generated from SASS. You can try this one:
var gulp = require('gulp'),
rubySass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps'),
browsersync = require('browser-sync').create();
gulp.task('rubySass', function() {
return rubySass('sources/', {
style: 'expanded',
sourcemap: true
})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/sources'
}))
// note the destination change here
.pipe(gulp.dest('./css/sass')) // note the destination change here
.pipe(browsersync.stream({match: "**/*.css"}));
});
gulp.task('browsersync', function() {
browsersync.init({
server: './',
logConnections: true
});
});
gulp.task('default', ['rubySass', 'browsersync'], function (){
gulp.watch('**/*.html', browsersync.reload);
gulp.watch('**/*.php', browsersync.reload);
gulp.watch('js/**/*.js', browsersync.reload);
// added exclusion for the CSS files generated from SASS
gulp.watch(['**/*.css', '!./css/sass/**/*.css'], function(file){
console.log("In gulp watch : css");
gulp.src(file.path)
.pipe(browsersync.stream());
});
gulp.watch('./sources/**/*.scss', ['rubySass']).on('change', function(evt) {
console.log("In gulp watch : sass");
});
});