I cant create output.css file in root directory via gulp .. I want output compressed one file with stylesheet, but the gulp doesnt work them.
I have this structure
- bower_components
- bootstrap
- sass
- custom.scss
- output.css
my gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scss', function () {
return gulp.src('bower_components/bootstrap/scss/_custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('output.css'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('bower_components/bootstrap/scss/_custom.scss', ['scss']);
});
gulp.task('default', ['watch']);
You forgot to include the 'scss' task in your default task.
gulp.task('default', ['scss', 'watch']);
Related
'use strict'
const gulp = require('gulp'),
sass = require('gulp-sass'),
sourceMap = require("gulp-sourcemaps");
gulp.task('sassToCss', ()=>{
return gulp.src("scss/application.scss")
.pipe(sourceMap.init())
.pipe(sass())
.pipe(sourceMap.write('./'))
.pipe(gulp.dest('css'));
});
gulp.task('watchFile', ()=>{
gulp.watch('scss/**/*.scss', ['sassToCss']);
});
when I use (gulp sassToCss) it always work.But when i start (gulp watchFile) and
edit some file in sass folder it's sometime work and sometime not. and which file i change it's give the error that this file can't find.enter image description here
So I use gulp quite often, mostly for scss/js compilation and minification.
I always use one entry scss file, with multiple imports, but when I add files to the entry file I need to rerun gulp (watch) to include those newly created files..
There must be a way to automatically include the new files?
Minified version of my gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('assets/sass/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('assets/sass/**/*.scss', ['sass']);
});
I am trying to move all the font-awesome fonts from the bower_components folder to my build directory, but the task isn't copying any files.
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify');
var config = {
bowerDir: 'bower_components'
}
gulp.task('fa', function() {
return
gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('assets/fonts/font-awesome/'));
});
When I run gulp fa it runs fine, but no files appear in my assets/fonts/font-awesome directory.
I know the .pipe(gulp.dest()) function works because I have a scripts function like so:
gulp.task('scripts', function(){
return gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'bower_components/foundation/js/foundation.min.js',
'assets/js/custom/app.js',
])
.pipe(concat('app.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(notify({
message: 'Scripts minified'
}));
});
Any ideas?
EDIT
My folder structure is like this:
assets/
--fonts/
----font-awesome/
gulpfile.js
bower_components/
--font-awesome/
----fonts/
------fontawesome-webfont.eot
------fontawesome-webfont.svg
------fontawesome-webfont.ttf
------fontawesome-webfont.woff
------fontawesome-webfont.woff2
I want to suggest to use gulp-copy
var copy = require('gulp-copy');
gulp.task('copy', function() {
gulp.src(['bower_components/font-awesome/fonts/*.*'])
.pipe(copy('assets/fonts/font-awesome/', { prefix: 3}));
});
I have this simple gulp task to process .scss files:
var gulp = require('gulp'),
compass = require('gulp-compass'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('css', function() {
gulp.src('app/scss/style.scss')
.pipe(plumber())
.pipe(compass({
config_file: './config.rb',
css: 'app/css',
sass: 'app/scss',
require: ['susy', 'breakpoint']
}))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('app/css'))
.pipe(reload({
stream: true
}));
});
My problem is that when there is already an app/css/style.css, it won't be overridden by running task gulp css.
As per https://github.com/wearefractal/vinyl-fs#destfolder-opt, gulp.dest should by default override the files in the destination folder. And I have another gulp task for uglify js, the overriding in which works well.
Could someone give me some hint on why this is happening?
What is the proper way to use gulp-watch plugin?
...
var watch = require('gulp-watch');
function styles() {
return gulp.src('app/styles/*.less')
.pipe(watch('app/styles/*.less'))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulp.dest('build'));
}
gulp.task('styles', styles);
I don't see any results when run gulp styles.
In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
Then type gulp watch and hit enter.
If your gulpfile.js is configured properly (see example below) than you will see output like this:
[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms
Every time you save your file you'll see new output here instantly.
Here is an example of a functional gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
watchLess = require('gulp-watch-less'),
pug = require('gulp-pug'),
less = require('gulp-less'),
minifyCSS = require('gulp-csso'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('watch', function () {
gulp.watch('source/less/*.less', ['css']);
});
gulp.task('html', function(){
return gulp.src('source/html/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function(){
return gulp.src('source/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
});
gulp.task('default', [ 'html', 'js', 'css', 'watch']);
Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.
gulp.task('less', function() {
gulp.src('app/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('watch', function() {
gulp.watch(['app/styles/*.less'], ['less'])
});
Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.
This is working code I hope it helps the lurkers.
Then (for version 4+) you need to do something like this:
var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
var uglify = require('gulp-uglify'); // and here as well
gulp.task('scripts', function(done) {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('watch', function() {
gulp.watch('./src/js/*.js',gulp.series(['scripts']))
});
** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))