I am trying to move on from WelandJS. (Yes, I know, it was discontinued years ago) but it was working.
Anyway, for the life of me I cannot get GULP and DurandalJS to play nicely.
Heres my code
var gulp = require('gulp');
var durandal = require('gulp-durandal');
gulp.task('durandal', function(){
durandal({
baseDir: 'app',
main: 'main.js',
output: 'main-built.js',
almond: true,
minify: true,
rjsConfigAdapter : function(rjsConfig){
rjsConfig.deps = ['text'];
return rjsConfig;
}
})
.pipe(gulp.dest('app'));
});
gulp.task('default', ['durandal']);
I have tried with Almond. Without.. with and without the rjsConfigAdapter.
All I want to do is minify and bundle my files. Nothing else. Don't know why this has to be like pulling teeth. But, Seems no matter what I do, it will NOT minify. After hours of work I have it bundling. You would think a simple flag called "minify" being true would in-face produce a minified .JS file. Hummmmm??
Is there a better solution than using GULP? (Project is DurandalJS (HUGE MISTAKE) inside VS 2017, ect ect ect)
if Gulp is truly the way to do, has anyone actually gotten this to work? With a real production app?
Related
I've written a gulp script that basically compiles all of my custom styling on top of my magento 2 theme. And it compiles all of the css apart from the css that is in the LESS Media query mixin:
.media-width(#extremum, #break) when (#extremum = 'max') and (#break = #screen__s) {
I've tried quite a lot from googling the problem to reading and understanding how the mixin works. I find it odd that I don't get an error in my terminal.
function compile(done) {
const brandPaths = ["gcn", "gtn", "embn", "gmbn"];
brandPaths.forEach(brand => {
src(`app/design/frontend/Playsports/theme_frontend_${brand}/web/css/source/_base-theme.less`)
.pipe(less())
.pipe(minifyCSS())
.pipe(rename({ suffix: ".min" }))
.pipe(dest(`app/design/frontend/Playsports/theme_frontend_${brand}/Magento_Theme/web/`));
done();
});
}
function watchChange(done) {
watch("app/design/frontend/Playsports/**/*.less", series(compile));
done();
}
I would expect my gulp script to compile the media queries as well but this is the problem I'm having
If you are looking for something that stays with core magento style and structures, our team has developed this bobmotor/magento-2-gulp that supports:
default magento 2 project structure with theme config inside dev/tools/grunt/configs/themes.js
installation with composer
.less
browsersync and liverreload
compiling es6+ with Babel
creating svg sprites
compiling critical.css (Magento 2.3.3)
I have been working on a project for a while, using Gulp for compiling SCSS to CSS (making one CSS file from several SCSS files), minifying CSS, also watching file changes and reloading page with Browser Sync.
While changing some scss and html code and not doing anything to the gulpfile and not renaming any files, page in a browser has suddenly failed and said that it cannot find a page.
I tried to reload the page with "gulp" command and it didn't help.
Now I have several problems. Gulp:
- stopped watching changes;
- compiling scss to css;
- opening and reloading page.
All these worked perfectly before this problem.
Here's my code for Gulp:
var gulp = require("gulp");
var sass = require("gulp-sass");
var watch = require("gulp-watch");
var csso = require("gulp-csso");
var concat = require("gulp-concat");
var browserSync = require("browser-sync").create();
/* Static Server + watching scss/html files */
gulp.task("serve", ["sass"], function() {
browserSync.init({
server: "./"
});
gulp.watch("*.html").on("change", browserSync.reload);
gulp.watch("sass/*.scss", ["sass"]).on("change", browserSync.reload);
});
/* Compile Sass into CSS & auto-inject into browsers */
gulp.task("sass", function() {
return gulp.src("sass/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("css"))
.pipe(browserSync.stream());
});
/* Concatenate and minify CSS */
gulp.task("css:build", function() {
gulp.watch("css/*.css").on("change", function() {
return gulp.src("css/*.css")
.pipe(concat("style.concat.css"))
.pipe(csso({
comments: false
}))
.pipe(gulp.dest("css_result"));
});
});
gulp.task("default", ["serve", "css:build"]);
If I run "gulp" in command line now it shows this:
enter image description here
Why could it happen and what steps should I do now?
Solved
Problem's solved. There was a mistake inside one sass file. After a correction everything started working without any other changes.
I would simplify this:
gulp.watch("sass/*.scss", ["sass"]).on("change", browserSync.reload);
to
gulp.watch("sass/*.scss", ["sass"]);
since you are already calling browserSync.stream() at the end of your 'sass' task. Also, try this instead of the browserSync.stream() call:
.pipe(browserSync.reload({stream: true}));
I assume your html file being served by browserSync has the css links produced by the 'sass' task NOT the css produced by the 'css:build' task. Otherwise you will have other problems, probably race issues since your 'css:build' task is running after the 'sass' task produced css is reloaded into the browser.
Let me know if this works for you.
Problem's solved. There was a mistake inside one sass file. After a correction everything started working without any other changes.
I have a Gulpfile that uses gulp-cssmin to minify my CSS, and I am also trying to get inline sourcemaps using gulp-sourcemaps (see code below). Without piping anything through Cssmin, my inline sourcemaps totally work. But when I try to pipe everything through Cssmin at the end of my 'sass' task, my inline sourcemaps stop working.
// Compile SASS to CSS, add vendor prefixes, write sourcemaps, then minify
gulp.task('sass', function(){
return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(sourcemaps.write())
.pipe(cssmin())
.pipe(gulp.dest('./_styles'));
});
Anyone have any ideas as to what I'm missing here? Or if I've just got things in the wrong order? Do inline sourcemaps still work with minified CSS? Or is it something specifically with gulp-cssmin?
I couldn't find a previous answer on Stack Overflow that dealt specifically with sourcemaps in relation to gulp-cssmin, so please enlighten!
Thanks.
I'm assuming you are using https://www.npmjs.com/package/gulp-cssmin.
gulp-cssmin uses https://www.npmjs.com/package/clean-css for cleaning the css, and thus the options of clean-css apply. However, since the css delivered to cssmin already contains a source map, it needs to be forwarded to clean-css, but this apparently isn't currently happening:
should pass input source map to minify() as second arg as seen in the second example: https://github.com/jakubpawlowicz/clean-css/blob/master/README.md#how-to-work-with-source-maps
but minify() call here doesn't: https://github.com/chilijung/gulp-cssmin/blob/master/index.js#L42
Therefore it doesn't currently seem to be possible to configure gulp-cssmin to update source maps.
I have added issue https://github.com/chilijung/gulp-cssmin/issues/22 requesting to add the missing functionality.
UPDATE
I found https://www.npmjs.com/package/gulp-clean-css which also uses clean-css behind the scenes AND supports source maps!
You need to update your code to:
var cleanCSS = require('gulp-clean-css');
gulp.task('sass', function(){
return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_styles'));
});
i.e. move the cleanCSS() before sourcemaps.write().
In general, here is a good list of gulp plugins that support source maps: https://github.com/floridoo/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support
I am struggling to get my SASS sourcemaps to work correctly. The problem seems to be the "sources" attribute within the sourcemap and how my SASS files are nested.
I have a Gulp task that compiles SASS to CSS. Here is an example of that
var paths = {
styles: {
src: './Stylesheets/SCSS/',
files: './Stylesheets/SCSS/**/*.scss',
dest: './Stylesheets/CSS/'
}
}
gulp.task('compile-sass', function (){
return gulp.src(paths.styles.files)
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed',
includePaths : [paths.styles.src]
}))
.pipe(prefix({
browsers: ['last 2 Chrome versions'],
cascade: false
}))
.pipe(sourcemaps.write('../Maps/', {
includeContent: false,
sourceRoot: '../SCSS'
}))
.pipe(gulp.dest(paths.styles.dest));
});
The above works for everything else - writing maps to disk, prefixing etc. I am using latest nodejs, gulpjs and relevant npm packages.
An example of folder/asset structure from within my Stylesheets folder:
SCSS/print.scss
SCSS/sectionA/style.scss
SCSS/sectionA/partial/_partialA.scss
SCSS/sectionA/partial/_partialB.scss
SCSS/sectionB/... etc
For SASS files in the root of SCSS/ the sourcemaps work properly. Chrome will show where the source styles are.
For SASS files in a subfolder within SCSS/ the sourcemaps do not work. The problem is the "sources": attribute has the wrong file listed in it.
The print.scss map for example will correctly have "sources":["print.scss"]. But sectionA/style.scss map will have "sources":["style.css"] instead of "sources":["partial/_partialA.scss", "partial/_partialB.scss"] as I would expect.
I have confirmed moving /SCSS/sectionA/style.scss to /SCSS/style.scss and amending any import paths does solve the issue. But I need it to be nested, not in the root of /SCSS.
If I can provide more detail please let me know. I have tried the answer from Path to source map is wrong and it does not solve my issue. I have also tried manipulating mapSources with no avail.
# Update 2019-05-24
My answer talks about using CSSNext. CSSNext was deprecated. The theory in my answer is still applicable using postcss-preset-env.
# Update 2017-03-08
After experimenting with PostCSS, I have used CSSNext to process the CSS after SASS has converted it. CSSNext auto-prefixes and doing it this way retains the connection to the original scss files in the sourcemap.
See my GitHub repo for an example.
After following Mark's feedback and investigating the gulp-autoprefixer module I believe this issue raised on the GitHub repo for gulp-autoprefixer is related to the incorrect sourceroot problem.
Using a variation of the hack from ByScripts I am able to get sourcemaps with the correct sourceroot for nested scss files. The hack used in the ByScripts gulpfile inits the sourcemaps function twice. Once before prefixing, and once after.
I have created a GitHub repo to try and illustrate a reduced test case and a workaround. Inspecting the css produced by the workaround shows the correct relationship back to the source scss.
I've looked at this question already and the answer doesn't work in my situation: gulp, browserify, maps?
So here is what I have:
gulp.task('debug-app-js', function () {
console.log('DEBUG-APP-JS');
var src = './node_modules/js/app-main.js',
dst = '../www/js',
bundler = browserify(src, {debug:true});
return bundler.bundle()
.pipe(source('app-build.js'))
.pipe(gulp.dest(dst))
});
Debug is set to true, so why don't I get any sourcemaps?
UPDATE: It appears to be an IE problem as the sourcemaps are appearing in Chrome and Firefox. But it's strange because I was getting sourcemaps in IE with my previous browserify build process. But now I can't seem to get any sourcemaps in IE no matter what browserify process I use. Any ideas?
Ok so the solution was I was trying to use browserify-shim transforms, which apparently wrecks the source maps for IE.