I am new to gulp and I am wondering what I am doing wrong as it will only create my styles.css file but none of my other css files are being created from the less directory
my gulp file
/* File: gulpfile.js */
// grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
less = require('gulp-less');
// create a default task and just log a message
gulp.task('default', function() {
return gutil.log('Gulp is running!')
});
gulp.task('build-css', function() {
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(gulp.dest('public/assets/styles'));
});
gulp.task('watch', function() {
gulp.watch('source/less/**/*.less', ['build-css']);
});
Reference to css in my index file
File structure
also in my styles.less file
I have #import 'source/less/mixins.less';
can you try like this...
/* File: gulpfile.js */
// grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
less = require('gulp-less');
gulp.task('build-css', function() {
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(gulp.dest('public/assets/styles'));
});
gulp.task('watch', function() {
gulp.watch('source/less/**/*.less', ['build-css']);
});
// create a default task and just log a message
gulp.task('default',['watch','build-css'], function() {
return gutil.log('Gulp is running!')
});
Related
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'));
});
// variable
// -----------------------------------------------------------------------------
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// task
// -----------------------------------------------------------------------------
gulp.task('styles', function() {
return gulp.src([
'./src/assets/styles/*.scss'
], {
base: './src/assets/styles/'
})
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/assets/styles/'))
.pipe(browserSync.stream());
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './dist/'
}
});
gulp.watch('./dist/*.html').on('change', browserSync.reload);
gulp.watch('./src/assets/styles/**/*.scss', ['styles']);
gulp.watch('./dist/assets/scripts/*.js').on('change', browserSync.reload);
});
How can make above code working? The scripts and html part working, but scss part not, when scss file change, styles task has start and finish with no error, the html file has body tag, but the browser do not inject the new css file.
Check this example, it may help you with a few tweaks in paths:
/**
* This example:
* Uses the built-in BrowserSync server for HTML files
* Watches & compiles SASS files
* Watches & injects CSS files
*/
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulp = require('gulp');
var sass = require('gulp-sass');
var filter = require('gulp-filter');
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']})) // compile sass
.pipe(gulp.dest('css')) // write to css dir
.pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
.pipe(reload({stream:true})); // inject into browsers
});
// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
});
I wanted to try gulp with sass and run into problems.
I have following sass directory:
main.scss //all custom styling
mixins.scss //custom mixins
variables.scss //custom variables
style.scss //file that imports all the above with bootstrap and fontawesome
When i run gulp, everything compiles and there are no errors, i get the correct sytle.min.css with all the styling included.
But then i change one of the watched files (main.scss || mixins.scss || variables.scss) I get one of the following errors: "undefined variable", "no mixin named ..." accordingly.
Also if I change and save main.scss i get no errors but none of the custom scss files get included into css, only bootstrap with fontawesome get compiled.
What is wrong with my setup?
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
notify = require("gulp-notify"),
concat = require('gulp-concat'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename')
bower = require('gulp-bower')
merge = require('merge-stream')
watch = require('gulp-watch');
var config = {
destPath: './dist',
sassPath: './src/sass',
jsPath: './src/js',
bowerDir: './src/components'
}
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest(config.bowerDir));
});
gulp.task('icons', function() {
var fontawesome = gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('./src/fonts'));
var bootstrap = gulp.src(config.bowerDir + '/bootstrap-sass/assets/fonts/bootstrap/**.*')
.pipe(gulp.dest('./src/fonts/bootstrap'));
return merge(fontawesome, bootstrap);
});
gulp.task('sass', function() {
console.log(config.sassPath);
var stream = gulp.src([config.sassPath + '/style.scss'])
.pipe(sass().on('error', sass.logError))
// .pipe(concat('style.css'))
.pipe(minifycss())
.pipe(rename('style.min.css'))
.pipe(gulp.dest(config.destPath));
return stream;
});
gulp.task('js', function() {
var stream = gulp.src([config.bowerDir + '/jquery/dist/jquery.js', config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js', config.jsPath + '/*.js'])
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename('script.min.js'))
.pipe(gulp.dest(config.destPath));
return stream;
});
gulp.task('watch', function(){
watch([config.sassPath + '/*.scss'], function(event, cb) {
gulp.start('sass');
});
watch([config.jsPath + '/*.js'], function(event, cb) {
gulp.start('js');
});
});
gulp.task('default', ['bower', 'icons', 'js','sass', 'watch']);
style.scss
#import "./variables.scss";
#import "./mixins.scss";
#import "../components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
#import "../components/font-awesome/scss/font-awesome.scss";
#import "./main.scss";
Ok, so I fixed it by adding timeout to my watch task before calling sass task:
watch([config.sassPath + '/*.scss'], function(event, cb) {
setTimeout(function(){
gulp.start('sass');
}, 1000);
});
It's either the IDE (sublime 2) on save delay or server ping problem.
I am trying to create a basic gulp build process template that starts with an app folder containing html, sass, javascript, and image files and builds those files into a public folder. I am using gulp to watch the app folder for changes and then automatically refreshing the build process to the public folder.
I using browser-sync to serve the public folder and watch for changes but it doesn't seem to automatically reload when a change to the public folder is made. If I manually refresh the browser the changes are reflected.
Thanks for the help, see below for my gulp file:
//BASIC GULP FILE SETUP
//-------------------------------------------------------------
//Include Gulp
var gulp = require('gulp');
//General Plugins
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var del = require('del');
var watch = require('gulp-watch');
var runSequence = require('run-sequence');
//CSS Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
//JS Plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//HTML Plugins
var minifyHTML = require('gulp-minify-html');
//IMG Plugins
//-------------------------------------------------------------
//TASKS
//-------------------------------------------------------------
//Clean Public Folder
gulp.task('clean', function() {
del(['public/**/*']);
});
//CSS Tasks
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(csso())
.pipe(gulp.dest('public/css'));
});
//HTML Tasks
gulp.task('html', function () {
return gulp.src(['./app/**/*.html'], {
base: 'app'
})
.pipe(minifyHTML())
.pipe(gulp.dest('public'))
;
});
//Image Tasks
gulp.task('image', function () {
return gulp.src('app/img/**/*.{png,jpg,jpeg,gif,svg}')
.pipe(gulp.dest('public/images'));
});
//JS Tasks
gulp.task('js', function () {
return gulp.src('app/js/**/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
// Watch files for changes
gulp.task('watch', function() {
// Watch HTML files
gulp.watch('./app/*.html', ['html'], browserSync.reload);
// Watch Sass files
gulp.watch('./app/sass/**/*.scss', ['sass'], browserSync.reload);
// Watch JS files
gulp.watch('./app/js/**/*', ['js'], browserSync.reload);
// Watch image files
gulp.watch('./app/img/*', ['image'], browserSync.reload);
});
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
});
gulp.task('defualt');
gulp.task('build', [], function(callback) {
runSequence('clean',
'sass',
'html',
'js',
'image');
});
I did a little more poking around the forums and the browser-sync documentation. In my serve task I needed to add a watch function to the Public directory that would manually call the reload every time a change was detected. So my 'browser-sync' task, now renamed 'serve', needs to look like this:
//Browser Sync Server
gulp.task('serve', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
gulp.watch("./public/**/*").on("change", browserSync.reload);
});
I am sure there is a way to do this with browser-sync's streams as well, but this manual reload method found in the docs has done the trick.
Try passing in a files object in the init function so it knows what to look for. No need for a different watch task, Browsersync does all that for you.
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
},
files: [
'**/*.css',
'**/*.js',
'**/*.html'
// etc...
]
});
});
I'm running a simple script that turns HAML and LESS into PHP and CSS. I'm also using gulp.watch to check up on all the changes I make.
Problem: gulp-less and gulp-haml process the files correctly. But when gulp.watch sees a change in the file the file ends up empty. gulp.watch is using the exact same task that succesfully created the php file.
var gulp = require('gulp');
var gutil= require('gulp-util');
var path = require('path');
var haml = require('gulp-haml');
var less = require('gulp-less');
// Images
gulp.task('less', function() {
return gulp.src('wp-content/themes/luento/assets/less/*.less')
.pipe(less({paths: [ path.join(__dirname, 'less', 'includes') ]}))
.pipe(gulp.dest('wp-content/themes/luento/assets/css/'));
});
gulp.task('haml-def', function () {
return gulp.src('wp-content/themes/luento/*.haml')
.pipe(haml({ext: '.php'}))
.pipe(gulp.dest('wp-content/themes/luento/'));
});
gulp.task('haml-templates', function () {
return gulp.src('wp-content/themes/luento/templates/*.haml')
.pipe(haml({ext: '.php'}))
.pipe(gulp.dest('wp-content/themes/luento/templates/'));
});
gulp.task('haml-partials', function () {
return gulp.src('wp-content/themes/luento/partials/*.haml')
.pipe(haml({ext: '.php'}))
.pipe(gulp.dest('wp-content/themes/luento/partials/'));
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('wp-content/themes/luento/templates/*.haml', ['haml-templates']);
gulp.watch('wp-content/themes/luento/partials/*.haml', ['haml-partials']);
gulp.watch('wp-content/themes/luento/*.haml', ['haml-def']);
gulp.watch('wp-content/themes/luento/assets/less/*.less', ['less'])
});
gulp.task('default', ['less', 'haml-def', 'haml-templates','haml-partials','watch']);