I'm usign postcss/precss with gulp to convert my scss markup to valid css. This is my gulpfile.js:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
gulp.task('stream', function () {
var processors = [
precss
];
return watch('src/*.css', { ignoreInitial: false })
.pipe(postcss(processors))
.pipe(gulp.dest('dest'));
});
gulp.task('default', gulp.parallel('stream'));
The problem is that it doesn't change file extensions, so I need to write scss in *.css files, and what I am trying to do is to set it to read scss from *.scss files and output css into *.css files. Can anybody tell me how to achieve that?
Not an expert on this, so I'll just share how we do sass compilation.
We use gulp-concat to concat the files together into one .css file. Your gulp snippet would be as follows:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('stream', function () {
var processors = [
precss
];
return watch('src/*.css', { ignoreInitial: false })
.pipe(postcss(processors))
.pipe(concat('FILENAME.css'))
.pipe(gulp.dest('dest'));
});
gulp.task('default', gulp.parallel('stream'));
Don't forget to do npm install --save-dev gulp-concat first!
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;
I currently have a file structure like this
projects
sites
site-example
css
scss
site-second-example
css
scss
site-third-example
css
scss
***
site-fifty-example
css
scss
I'm trying to write a gulp task that I can run from the projects folder that will look inside the sites folder, and then go through each folder separately, look for any scss files, and then compile them to css.
I tried to follow this recipe but I must be messing it up somehow:
https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var output = './**/css';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
var scriptsPath = './sites';
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
gulp.task('sass', function() {
var processors = [
autoprefixer({
browsers: ['last 12 versions']
})
];
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(output));
});
return merge(tasks);
});
You can't put a globstar ** in your destination directory like this:
var output = './**/css';
That won't work, because gulp.dest() can't magically guess from context which directory you want your files to end up in.
You have to explicitly construct a destination directory for each folder returned from getFolders(), just as you do for gulp.src():
var tasks = folders.map(function(folder) {
var src = path.join(scriptsPath, folder, 'scss');
var dst = path.join(scriptsPath, folder, 'css');
return gulp.src(path.join(src, '**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(dst));
});
I am trying to run Gulp and save license data like jQuery license info.
Gulp runs fine files are minimized but no license file: This is what I have in my Gulp file.
var gulp = require('gulp'),
saveLicense = ('uglify-save-license'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('scripts/*.js', {
output: {
comments: saveLicense
}
}
).pipe(uglify()).pipe(gulp.dest('publish_folder/scripts'));
console.log('Task Completed');
});
I'm very new to Gulp.
The saveLicense object must be passed to the uglify plugin, not to gulp.src. Try this:
var gulp = require('gulp'),
saveLicense = require('uglify-save-license'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('scripts/*.js')
.pipe(uglify({
output: {
comments: saveLicense
}
}))
.pipe(gulp.dest('publish_folder/scripts'));
console.log('Task Completed');
});
PS: Also I think you make a typo, you forget to write require when loading uglify-save-license plugin.
I wanna do this thing:
I have a folder with many js files. When I save one of them, I want to save the minified file in other folder.
I got it partially, because my script watch many files and when I change one, all files are copied and minified to the destination folder.
I discover recently that gulp.run is not used anymore.
If someone could help me, I'll be greatful.
I was trying this way:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var files_dev = "./_sys/js/private/*.js";
var path_prod = "./_sys/js/public/";
gulp.task('dist-file', function(file) {
gulp.src(file)
.pipe(uglify())
.pipe(gulp.dest(path_prod));
});
gulp.task('default', function() {
gulp.watch(files_dev).on("change", function(file) {
gulp.run('dist-file');
});
dist-file doen't need to be a gulp task, you can make that a function which you can pass the file or glob to process. Also watch is part of gulp now so you shouldn't need gulp-watch.
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var files_dev = "./_sys/js/private/*.js";
var path_prod = "./_sys/js/public/";
function uglifyFile (file) {
gulp.src([file])
.pipe(uglify())
.pipe(gulp.dest(path_prod));
}
gulp.task('watch-test', function() {
gulp.watch(files_dev).on("change", function (event) {
uglifyFile(event.path);
});
});
I'm trying to concatenate my JS files and run them through Babel for a new project, but instead of overwriting the destination file on each task run, my gulpfile only appends changes to the file. So my destination file ends up looking like this:
console.log('hello');
//# sourceMappingURL=app.js.map
console.log('goodbye');
//# sourceMappingURL=app.js.map
What am I missing? Below is my gulpfile.
Thanks in advance.
var gulp = require('gulp');
var sourcemaps = require("gulp-sourcemaps");
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('js', function(){
return gulp.src("./app/js/*.js")
.pipe(sourcemaps.init())
.pipe(concat("app.js"))
.pipe(babel())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./app/js/"));
});
gulp.task('js-reload', ['js'], reload);
gulp.task('serve', ['js'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("./app/js/*.js").on('change', ['js-reload']);
gulp.watch("./app/*.html").on('change', reload);
});
gulp.task('default', ['js', 'serve']);
You're reading and writing to the same destination directory. Therefore the file app.js is first read, some stuff is added to it, and then the result is written to app.js, causing this appending behaviour. You should output to a different directory than you are reading from.