When I'm changing css file and then open "bundle.min.css", there are no changes applied, no errors are displayed in the console, what I'm doing wrong.
Here is my gulpfile:
var gulp = require('gulp'),
concatCss = require('gulp-concat-css'),
rename = require("gulp-rename"),
watch = require('gulp-watch'),
notify = require("gulp-notify"),
autoprefixer = require('gulp-autoprefixer'),
minifyCss = require('gulp-minify-css');
gulp.task('default', function() {
return gulp.src('*.css')
.pipe(concatCss("bundle.css"))
.pipe(minifyCss(''))
.pipe(rename("bundle.min.css"))
.pipe(gulp.dest('css'))
.pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false}))
.pipe(notify("Gulp Done!"));
});
gulp.task('watch', function () {
watch('*.css', ['default'])
});
Related
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;
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}));
});
I encounter a problem with Gulp, I can not compile my .scss at each modification. When I run "gulp watch" and make changes in my css, nothing happens.
gulp css works, gulp watch doesn't work.
Yet everything looks good.
Do you have an idea ?
Thanks !
// Requires
var gulp = require('gulp');
// Include plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
// var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
// tâche CSS = compile vers knacss.css et knacss-unminified.css
gulp.task('css', function () {
return gulp.src('./src/assets/css/style.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(rename('knacss.css'))
.pipe(gulp.dest('./dist/assets/css/'))
.pipe(rename('style.css'))
//.pipe(sourcemaps.init())
.pipe(minifycss())
//.pipe(sourcemaps.write('.', {includeContent: false}))
.pipe(gulp.dest('./dist/assets/css/'));
});
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['css']);
});
gulp.task('default', ['css']);
Gulp watch doesn't not compile my .scss at each modification
That's because you don't tell it to.
You are only watching *.scss files in ./src/assets/css, not in subfolders.
To include subfolders, use this syntax:
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/**/*.scss'], ['css']);
});
try with something like.
//SASS task
gulp.task('sass', function () {
var sassPath = {
cssSrc: ['./src/assets/css/*.scss'], cssDest: './src/assets/css/'
};
gulp.src(sassPath.cssSrc)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(sassPath.cssDest))
.pipe(livereload());
});
and then in your watch:
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['sass']);
});
and:
gulp.task('default', ['sass','css']);
This is my gulpfile:
// including plugins
var gulp = require('gulp')
, rename = require('gulp-rename')
, uglify = require("gulp-uglify")
, cssmin = require("gulp-cssmin");
// task css
gulp.task('minify-css', function () {
gulp.src([
'./www/assets/css/bootstrap.min.css',
'./www/assets/css/admin.css',
'!./www/assets/css/build.min.css'
])
.pipe(cssmin())
.pipe(rename('build.min.css'))
.pipe(gulp.dest('./www/assets/css'));
});
// task js
gulp.task('minify-js', function () {
gulp.src([
'./www/assets/js/jquery.min.js',
'./www/assets/js/boostrap.min.js',
'./www/assets/js/vue.min.js',
'./www/assets/js/vue-resource.min.js',
'./www/assets/js/MiniModel.js',
'./www/assets/js/AdminUsers.js',
'!./www/assets/js/build.min.js'
])
.pipe(uglify())
.pipe(rename('build.min.js'))
.pipe(gulp.dest('./www/assets/js'));
});
gulp.task('default', ['minify-css', 'minify-js']);
After run ./node_modules/.bin/gulp the output is:
build.css only has admin.css
build.js only has AdminUsers.js
Why is missing a lot of source files on output?
More details:
Ubuntu: 14.10
Node version: v0.10.25
Gulp version: 3.9.1
UPDATE1: Im using in index.html like this:
<script type="text/javascript" src="/mini-vue/www/assets/js/build.min.js"></script>
<script type="text/javascript">
var usersmodel = new MiniModel(Vue, 'users', '/mini-vue/www/');
var adminusers = new AdminUsers(Vue, usersmodel);
adminusers.reload(1);
</script>
try using this
var minifyCSS = require('gulp-minify-css'),
minifyJS = require('gulp-minify'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
gulp.task('minify-js', function() {
return gulp.src('./www/assets/js/**/*.js')
.pipe(minifyJS())
.pipe(concat('build.min.js'))
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest('./www/assets/js'));
});
gulp.task('minify-css', function() {
return gulp.src('./www/assets/css/**/*.css')
.pipe(minifyCSS())
.pipe(concat('build.min.css'))
.pipe(gulp.dest('./www/assets/css'));
});
gulp.task('default', ['minify-css', 'minify-js']);
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']);