I'm trying to set a shopify dev workflow, and i'm stuck in a problem. How can i change the dest() output in gulp-sass to use .liquid files in the assets folder?
gulp.task('sass', function() {
gulp.src('stylesheets/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/'));
});
I want to get as output something like main.css.liquid, so i can use the .liquid methods.
Is that possible?
There's a good thread about it # Gulp. As said it seems that gulp-rename may be a great fit.
In your case, you can change your code to:
gulp.task('sass', function() {
gulp.src('stylesheets/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.rename('destinationpath/yourfile.liquid'));
.pipe(gulp.dest('./assets/'));
});
Related
Years back I setup vs code to somewhat replicate the current methods I was using to design my sites (using standalone apps). I decided at the time I would just stick to what I was using. Since those apps are no longer maintained I am coming across compiling issues now - the time has come to make the jump.
I am having trouble with my gulpfile.js which is from back when I originally tried this all out. I saved it in case I needed to return to using vs code. Problem is apparently this format no longer works because gulp has updated. All of this is basically foreign to me right now and while I understand what things are doing I don't understand enough to modify this to the current method for gulp 4^.
Any chance someone can help me out with this one? I've looked at the guides about series and parallel and so on. I guess it's easier for me to understand by looking at a working example.
my old gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
//processes the scss files in this folder
//minimizes them
gulp.task('sass', function () {
return gulp.src('_config/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cleanCSS())
.pipe(gulp.dest('assets/css'));
});
//minifies all js files in this folder
gulp.task('js', function () {
return gulp.src('_config/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/js'));
});
//minifies all js files in this folder
gulp.task('scripts', function () {
return gulp.src('_config/scripts/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/scripts'));
});
//creates 'watchers' that run tasks on specific activities
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', ['sass']);
gulp.watch('_config/js/**/*.js', ['js']);
gulp.watch('_config/scripts/**/*.js', ['scripts']);
gulp.watch('_config/img/**/*', ['img']);
});
//this is the default task that runs everything
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);
You are not that far from where you need to be. Change this code:
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', ['sass']);
gulp.watch('_config/js/**/*.js', ['js']);
gulp.watch('_config/scripts/**/*.js', ['scripts']);
gulp.watch('_config/img/**/*', ['img']);
});
gulp.task('default', ['sass', 'js', 'scripts', 'watch']);
to
gulp.task('watch', function () {
gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
gulp.watch('_config/js/**/*.js', gulp.series('js'));
gulp.watch('_config/scripts/**/*.js', gulp.series('scripts'));
gulp.watch('_config/img/**/*', gulp.series('img'));
});
gulp.task('default', gulp.series('sass', 'js', 'scripts', 'watch'));
gulp.task now has this signature: gulp.task([taskName], taskFunction)
Before gulp v3 used an array of tasks as the second argument. gulp v4 uses a function, like gulp.series() or gulp.parallel(), as the second argument. And gulp.series() takes a list of tasks as its arguments. Since you used the gulp.task() method to create your tasks, the task names in series should appear as strings, like 'sass', 'js', etc.
Note: The preferred way to create tasks in v4 is as functions like:
function scripts() {
return gulp.src('_config/scripts/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('assets/scripts'));
});
Then you would use those function names in series as gulp.series(scripts, js) - not as strings. You should look into using this form of tasks.
gulp.watch() signature: gulp.watch(globs, [options], [task])
The [task] can be a single task name, like your 'sass' or a composed task, which just means one generated using series or parallel.
In your case, you are running only one task in each watch statement, so
gulp.watch('_config/scss/**/*.scss', 'sass');
should suffice. I showed them as composed tasks like:
gulp.watch('_config/scss/**/*.scss', gulp.series('sass'));
in case in the future you want to run more than one task upon a file change. In which case you could use something like:
gulp.watch('_config/scss/**/*.scss', gulp.series('sass', 'serve'));
for example.
Finally switch out gulp-uglify for gulp-terser. gulp-terser will handle es6 syntax that gulp-uglify cannot. gulp-terser
I've been trying to get gulp sass and gulp sourcemaps to do exactly what I want and I'm finding it hard. I want to take a sass entry file (src/sass/index.scss), generate an output file (dist/css/index.css) and a separate sourcemap for that index file (dist/css/index.css.map) which has a sourceRoot set to the project base (absolute path: /home/damon/projects/test) and the sourcemap entries to be relative to that path.
Here's what I tried:
attempt 1: straight example code from gulp-sass:
var sassEntry = 'src/sass/index.scss';
gulp.src(sassEntry)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'));
Outcome: this inlines the sourcemap into the CSS file so I can't tell if it's right or not.
attempt 2: write it to separate file
gulp.src(sassEntry)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'));
Outcome: writes a separate sourcemap, but the sourceRoot says '/sources/' (WTF is that?!, it doesn't exist and I never configured it)
and the paths are all relative to the sass entry file, not the project base, which is also going to be meaningless when my browser tries to locate the source files.
attempt 3: try to fix the sourceroot (also I found includeContent: false)
gulp.src(sassEntry)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest('dist/css'));
Outcome: the sourceroot is now my working folder which is nice, the content isn't included which is nice, but the files in the sourcemap are still relative to the sass entry file not to the sourceRoot, so my map is still useless
attempt 4: Set the gulp.src base
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest('dist/css'));
Outcome: Infuriatingly, setting the base on gulp.src fixes the sourcemap - sourceRoot is still correct and the source file paths are relative to the sourceRoot, BUT it now outputs to dist/css/src/sass/index.css which is wrong. WTF!
attempt 5: use absolute paths
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest(__dirname + '/dist/css'));
Outcome: no change, it still outputs to the same deep structure in dist.
If anyone can enlighten me on how to do this I would be forever grateful.
While Sven's answer is perfectly good, I also found an answer to my own question by getting a deeper understanding of how gulp works (which I was trying to avoid), and apparently gulp stores each matched file with a path, so adding:
{ base: __dirname }
in the gulp.src makes it that each matched file has the full path from the base, which then causes them to output with the full relative path from wherever you set the base to. The solution I ended up with was to use gulp-flatten, which removes those relative paths from files in the pipeline, so my eventual function looked like this:
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(flatten())
.pipe(gulp.dest(__dirname + '/dist/css'));
easy once you understand more about what it's trying to do I guess.
Since your attempt 4 does everything you want except place the resulting files in the wrong location, the easiest fix would be to just change that location with gulp-rename after the sourcemaps have been generated:
gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: __dirname}))
.pipe(rename({dirname:''}))
.pipe(gulp.dest('dist/css'));
When I change some scss file everything seems to work (scss is compiled to css file and the source files are watched):
[21:19:46] Starting 'sass'...
[BS] 1 file changed (principal.css)
[21:19:46] Finished 'sass' after 18 ms
But I need to reload the browser by hand to reflect the changes. This is my gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('default', ['sass'], function() {
browserSync.init({
proxy: "huertajalon/"
});
gulp.watch("./sass/**/*.scss", ['sass']);
gulp.watch("./*.php").on('change', browserSync.reload);
gulp.watch("./style.css").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("sass/principal.scss")
.pipe(sass())
.pipe(gulp.dest("./css"))
.pipe(browserSync.stream());
});
In other cases (for example, when I modify and save style.css) the browser reloads well.
What am I doing wrong? Thanks!
Are you using browser-sync version 2.6.0 or higher, since this is required to use browserSync.stream().
http://www.browsersync.io/docs/api/#api-stream
If not then you should update or you could try browserSync.reload({stream: true}) instead, which was the previous way to handle streams with browser-sync. If I remember correctly.
Try something like this.
gulp.task(default, ['sass'], browserSync.reload);
Also refer to http://www.browsersync.io/docs/gulp/#gulp-reload
I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.
My gulpfile.js has
gulp.task('compass', function() {
return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
.pipe(compass({
config_file: 'sites/default/themes/lsl_theme/config.rb',
css: 'css',
sass: 'scss'
}))
.pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
.pipe(notify({
message: 'Compass task complete.'
}))
.pipe(livereload());
});
with
gulp.task('scripts', function() {
return gulp.src([
'sites/default/themes/lsl_theme/js/**/*.js'
])
.pipe(plumber())
.pipe(concat('lsl.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
// .pipe(stripDebug())
.pipe(uglify('lsl.js'))
.pipe(rename('lsl.min.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
.pipe(sourcemaps.write())
.pipe(notify({
message: 'Scripts task complete.'
}))
.pipe(filesize())
.pipe(livereload());
});
and the watch function
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});
when I run gulp, the result is
[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms
and no changes are registered.
for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.
My assumption is that you are on windows? Correct me if I'm wrong.
There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out
// .pipe(notify({
// message: 'Scripts task complete.'
// }))
and see if the problem still exists.
If that does fix the issue, a solution from this thread may be helpful.
You can use the gulp-if
plugin in combination with
the os node module
to determine if you are on Windows, then exclude gulp-notify, like
so:
var _if = require('gulp-if');
//...
// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());
//...
// use like so:
.pipe(_if(!isWindows, notify('Coffeescript compile successful')))
It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.
I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.
After creating a 'dest' folder to hold the new js everything started working just peachy.
I tried
gulp.task('sass', function () {
return gulp.src(['./scss/*.scss'])
.pipe($.replace(/_VIEWPORT_WIDTH_/g,conf.project.viewport||640))
.pipe($.sass({errLogToConsole: true}))
.pipe(gulp.dest('./resources/css/'));
});
still not working.
pipe replace after SCSS will work,but SCSS can not do math during the process.
gulp.task('sass', function () {
return gulp.src(['./scss/*.scss'])
.pipe($.sass({errLogToConsole: true}))
.pipe($.replace(/_VIEWPORT_WIDTH_/g,conf.project.viewport||640))
.pipe(gulp.dest('./resources/css/'));
});
any suggestion?I know there is an ugly way,but that's too Grunt
gulp.task('sass', function () {
return gulp.src(['./scss/*.scss'],{buffer:true})
.pipe($.replace(/_VIEWPORT_WIDTH_/g,conf.project.viewport||640))
.pipe(gulp.dest('./tmp/scss/'))
.pipe($.sass({errLogToConsole: true}))
.pipe(gulp.dest('./resources/css/')).on('end',function(){
del(['./tmp/scss/'], {force: true});
});
});
It's because the latest version of gulp-sass (and perhaps every previous version) has a serious bug / design flaw -- it discards changes to file contents from earlier in the pipeline. I reported this at dlmanning/gulp-sass#158 and it's supposed to be fixed in the next major version (v2) I believe.