My current working gulpfile.js:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
cssnano()
];
return gulp.src('css/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('css/min/'));
});
Gulp pipes all the CSS to PostCSS which runs them through cssnano, and they all land in css/min. Nice.
How do I get cssnano to use advanced transforms?
Ideally, with vars, or parameter objects instead of extarnal config scripts.
I think the anwser might be on this cssnano guide page, but I don't know how to make it work with Gulp+PostCSS.
You can pass options to the cssnano function, so I believe it is a matter of the following:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
cssnano({
preset: ['advanced', {
// preset options here, e.g...
discardComments: { removeAll: true }
}]
})
];
return gulp.src('css/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('css/min/'));
});
Obviously ensure you've got cssnano-preset-advanced first via npm install cssnano-preset-advanced --save-dev
Related
When I use gulp styles it just pipes the initial code to the destination without autoprefixing and when I'm trying to use gulp watch on styles function it starts but never ends.
I'm using Gulp 4
gulpfile
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function() {
return new Promise(function(resolve, reject){
gulp.src('style.css')
.pipe(autoprefixer())
.pipe(gulp.dest('build'))
resolve();
});
});
gulp.task('watch', function() {
gulp.watch('style.css', gulp.series('styles'));
});
Terminal output
PS C:\Users\OneDrive\testGulp> gulp watch
[19:00:23] Using gulpfile ~\OneDrive\testGulp\gulpfile.js
[19:00:23] Starting 'watch'...
File tree structure
In my gulfile.js, I'm using watch to compile scss files to css files. It runs without error and when I run gulp in powershell, it says that it is watching, but whenever I define a style in my scss file, it doesn't affect the css file which is created and I have to stop gulp and run it again. Actually, it's not watching carefully !
Here is my code.
Thanks for any help.
"use strict";
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");
var { task, series } = require("gulp");
var SCSS_SRC = "./src/Assets/scss/**/*.scss";
var SCSS_DEST = "./src/Assets/css";
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));
});
task("watch_scss", function() {
gulp.watch(SCSS_SRC, series(["compile_scss"]));
});
task("default", series("watch_scss"));
You missed a return. The gulp doesn't know the task has completed. In your case you have to return the stream. Here is how your code should be:
"use strict";
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");
var { task, series } = require("gulp");
var SCSS_SRC = "./src/Assets/scss/**/*.scss";
var SCSS_DEST = "./src/Assets/css";
function compile_scss() {
return 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));
}
function watch_scss() {
gulp.watch(SCSS_SRC, series(compile_scss));
}
exports.default = series(watch_scss);
I also took the liberty of removing the "task()"s since
Reminder: This API isn't the recommended pattern anymore - export your tasks.
as said here.
For the problem be solved, as #Gabriel mentioned and according this link, I changed my code to this and the problem solved. But when I ran npm start, the watch stopped working; Therefore, I installed "concurrently" through npm and changed my start in package.json as mentioned here:
npm install concurrently
"start": "concurrently \"react-scripts start \" \"gulp \"",
"use strict";
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");
var { task, series } = require("gulp");
var SCSS_SRC = "./src/Assets/scss/**/*.scss";
var SCSS_DEST = "./src/Assets/css";
function compile_scss() {
return 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));
}
function watch_scss() {
gulp.watch(SCSS_SRC, series(compile_scss));
}
exports.default = series(watch_scss);
So I've been working on this project for a little while and I wanted to add my own css into the project. I'm trying to add a new scss file to the project and have it get built into the main css file, however Gulp doesn't want to import my scss file.
Here is the gulp code
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var webserver = require('gulp-webserver');
var paths = {
sass: ['src/scss/**'],
js: ['src/ng/_declare.js', 'src/ng/**'], //_declare.js needs to be first, so it gets added to bundle first.
static: ['src/js/**'],
core: ['./td_frontend_shared/**']
};
gulp.task('default', ['watch-dev']);
gulp.task('publish-dev', function(done){
});
gulp.task('sass', function(done) {
gulp.src('src/scss/import.scss')
.pipe(sass())
.on('error', function(err){
console.log('error building sass', err);
done();
})
.pipe(gulp.dest('public/dist/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('public/dist/'))
.on('end', done);
});
Any help would be greatly appreciated!
You need to add the task in default if you want it run right away on using gulp in command line. You can do it like this...
gulp.task( 'default', function () {
gulp.start(
'sass'
);
} );
Try my repository for using SASS in HTML projects, it supports babel(optional) and auto reloads page when you change scss files ;)
https://github.com/shramee/gulp-sass-babel
I have an Ionic V1 app and I did ionic setup sass.
I've added the scss in watchPatterns in ionic.config.json. Gulp detects the file change but doesn't compile the scss into the css. Tried a lot of things.
I did ionic setup sass twice. It seems that the sass only compiles into css once I do ionic setup sass.
Here's the gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var paths = {
sass: ['./scss/**/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
I updated to IONIC 2 few days and have the same problem.
Just add these 2 lines to your gulpfile.js:
gulp.task('serve:before', ['default','watch']);
gulp.task('run:before', ['default']);
It's working for me.
I had similar issue and the problem started, when I had upgraded ionic-cli to version 2.x. So I would suggest you to downgrade back to version 1.x.x.; for example I am using last subversion:
npm install -g ionic#1.7.16
For me, now everything works as it was before the upgrade (I am using same gulp file, I also rename "ionic.config.json" back to "ionic.project"). Hope it helps!
Check TomiL's answer, it might be able to help you. If not, try running two cmd's, first type ionic serve, and in the other one type gulp default, or whatever your task name is. here's my gulpfile
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var paths = {
sass: ['./scss/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
I've got the same issue. I found out that it's because gulp doesn't compile scss files before 'ionic serve', so just add the task below solved the problem:
gulp.task('serve:before', ['default']);
I write most of my CSS in Chrome dev tools, so that the browser will watch for changes to the files and will refresh appropriately. I have recently switched from Compass to Gulp-Sass for compiling my SCSS, but Chrome no longer refreshes upon changes. If I swap out Gulp-Sass for Gulp-Ruby-Sass in my Gulpfile, Chrome will refresh.
I really want to stick with Gulp-Sass/libsass since it compiles so much faster and I don't want a Ruby dependency, but I can't figure out what I need to do to make Gulp-Sass fit in with my workflow.
Any suggestions would be appreciated. Thanks in advance.
Here's my gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');
var sassdoc = require('sassdoc');
var sass_options = {
errLogToConsole: true,
outputStyle: 'compressed'
};
gulp.task('sass-app', function(){
return gulp.src('./static/sass/styles.scss')
.pipe(sourcemaps.init())
.pipe(sass(sass_options).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
// .pipe(rename('styles.css'))
.pipe(gulp.dest('./static/css'));
});
gulp.task('sass-all', function() {
return gulp.src('./static/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sass_options).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./static/css'));
});
gulp.task('watch', ['sass-app'], function(){
gulp.watch('./static/sass/**/*.scss', ['sass-app']);
});
gulp.task('watch-all', ['sass-all'], function (){
gulp.watch('./static/sass/**/*.scss', ['sass-all']);
});
I suggest Browsersync
Here's a sample code that may help with your problem with the proxy
gulp.task('watch-all', ['sass-all'], function (){
browserSync.init({
proxy: "http://localhost/project_name"
});
gulp.watch('./static/sass/**/*.scss', ['sass-all']);
});