gulp plugin gulp-ruby-sass not compiling - ruby-on-rails

Gulp plugin gulp-ruby-sass(https://github.com/sindresorhus/gulp-ruby-sass) giving not compiling, the error message in terminal coming like this 👇
Error: must provide pattern
Here is the gulpfile.js details
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass');
gulp.task('styles', function (argument) {
gulp.src('sass/app.scss')
.pipe(sass())
.pipe(gulp.dest('css/'));
});

The gulp-ruby-sass syntax has been changed:
instead of: it is now:
gulp.task('styles', function (){ gulp.task('styles', function (){
gulp.src('sass/app.scss') return
.pipe(sass()) sass('sass/app.scss')
.pipe(gulp.dest('css/') .pipe(gulp.dest('css/')
; ;
}); });
Please check it out and mark your problem as solved.

The official gulp-ruby-sass documentation says it should be done like this:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('sass', function () {
return sass('source/file.scss')
.on('error', sass.logError)
.pipe(gulp.dest('result'));
});

Install libsass because it runs much faster than ruby sass ,
it works with node
npm install gulp-sass --save-dev`
Install gulp load plugins because it does so much and loads
plugins from your json and you dont need to declare in your gulpfile
(carefull how many you use because if you load too many it hinders
performance)
npm install --save-dev gulp-load-plugins
var gulp = require('gulp'),
$ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true
});
gulp.task('libsass', function () {
gulp.src('sass/app.scss')
.pipe($.sass({errLogToConsole: true}))
.pipe($.autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe($.sourcemaps.write('app/css/map'))
.pipe(gulp.dest('app/css'))
});

Related

Using <style lang="scss"> in vue component gives error

I am trying to use vue js in rails.
Everything works, except when I tried to use <style> inside .vue component
The exact error is:
./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/layouts/dashboard.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
My environment.js file
const { environment } = require('#rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vueLoader = require('./loaders/vueLoader')
const vuetifyLoader = require('./loaders/vuetifyLoader')
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vueLoader)
environment.loaders.prepend('vuetify', vuetifyLoader)
const resolver = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
environment.config.merge(resolver)
module.exports = environment
VuetifyLoader.js file
module.exports = {
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
}
install these two plugins.
npm install --save node-sass
npm install --save sass-loader
So, the problem was with fiber and indentedSyntax. After removing those two, everything works as expected. I was getting lots of error related to scss like
like
expected new line
in sass files inside node_modules. I don't know, why vuetify recommends to use fiber in sass loader.

Rollup with gulp and typescript outputs Cannot find module 'tslib/tslib.es6.js'

I followed the typescript gulp in the doc :https://rollupjs.org/guide/en#gulp
here is my gulp file :
const gulp = require("gulp");
const rollup = require("rollup");
const rollupTypescript = require("rollup-plugin-typescript");
gulp.task("build", () => {
return rollup
.rollup({
input: "./main.ts",
plugins: [rollupTypescript()]
})
.then(bundle => {
return bundle.write({
file: "./main.js",
format: "umd",
name: "library",
sourcemap: true
});
});
});
Error: Cannot find module 'tslib/tslib.es6.js' from 'C:\projets\Tests\rollup\node_modules\rollup-plugin-typescript\dist'
at Function.module.exports [as sync] (C:\projets\Tests\rollup\node_modules\resolve\lib\sync.js:58:15)
at typescript (C:\projets\Tests\rollup\node_modules\rollup-plugin-typescript\dist\rollup-plugin-typescript.cjs.js:109:29)
at gulp.task (C:\projets\Tests\rollup\gulpfile.js:9:17)
at taskWrapper (C:\projets\Tests\rollup\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:301:14)
at runBound (domain.js:314:12)
at asyncRunner (C:\projets\Tests\rollup\node_modules\async-done\index.js:55:18)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
Anyone knows why this is happening is this a bug with rollup or am I doing something wrong?
You need tslib, which is a peer dependency of rollup-plugin-typescript.
npm i -D tslib

Cant bundle angular app in gulp build

Im trying to bundle my app so that I can push it to the test server using Gulp. This is my gulp file. It is not done yet, (Build is supposed to also run vendor-js) but I get an error when it runs bundle:app. This is my gulp file:
var gulp = require('gulp'),
tsc = require('gulp-typescript'),
Builder = require('systemjs-builder'),
tslint = require('gulp-tslint'),
sourcemaps = require('gulp-sourcemaps'),
tscConfig = require('./tsconfig.json');
gulp.task('lint', function () {
return gulp.src('app/**/*.ts')
.pipe(tslint({ formatter: 'prose' }))
.pipe(tslint.report());});
gulp.task('compile', ['lint'], function () {
return gulp.src('app/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsc(tscConfig.compilerOptions))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));});
var vendorJS = [
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/systemjs.config.js'];
var concat = require('gulp-concat');
gulp.task('vendor-js', function () {
return gulp.src(vendorJS)
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'));});
var systemjsBuilder = require('gulp-systemjs-builder');
gulp.task('bundle:app', function () {
var builder = systemjsBuilder();
builder.loadConfigSync('./systemjs.config.js');
builder.buildStatic('dist/js/main.js', 'app.min.js', {})
.pipe(gulp.dest('dist/js'));});
gulp.task('build', ['compile', 'bundle:app']);
The error I am getting is :
Unhandled rejection Error on fetch for dist/js/app.module at
file:///C:/path/dist/js/app.module Loading dist/js/main.js Error:
ENOENT: no such file or directory, open
'C:\Dev\path\dist\js\app.module' at Error (native)
Do you guys have any suggestions on how to make this work and compress the whole thing to something like "app.min.js" anyone?

including devdependencies in package.json

I'd like to generate my devDependencies based on need. For this I have an array in my generator and some operations like this:
var FiddleGenerator = generator.Base.extend({
init: function() {
this.devDependencies = [];
},
//...excluded for brevity
gruntConfigure: function() {
this.devDepedencies = [
'grunt',
'grunt-contrib-watch',
'grunt-contrib-connect'
];
},
installStuff: {
if(this.option('skip-install')) return;
this.npmInstall(this.devDependencies, { saveDev: true });
}
});
The issue here is when the user opts to skip the npm installation and later does it manually (i.e. npm install) nothing gets installed.
However, I cannot simply write a package.json file like that...what versions do I put against each package in order to have them look like the following:
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-connect": "^0.7.0"
}
Just write the devDependencies to the package.json file manually inside the JS code (this.fs.writeJSON). No need to use npmInstall() for that.
You can see this being done here: https://github.com/yeoman/generator-node/blob/master/generators/gulp/index.js#L38-L69

Jest and Bower Module loading in jest tests

Lets say I have a project that uses bower, grunt, bowerify(with shim) and since I love Jest so much I want to test with that. How in the world do I get jest to see my browserify shim modules when it runs tests. I use grunt, to kick off the npm test command.
Here is my package.json file.
"browser": {
"jquery": "./bower_components/jquery/dist/jquery.js",
"foundation": "./bower_components/foundation/js/foundation/foundation.js",
"fastclick": "./bower_components/fastclick/lib/fastclick.js",
"greensock-tm": "./bower_components/gsap/src/uncompressed/TweenMax.js",
"greensock-css": "./bower_components/gsap/src/uncompressed/plugins/CSSPlugin.js",
"greensock-time": "./bower_components/gsap/src/uncompressed/TimelineMax.js",
"scrollmagic": "./bower_components/ScrollMagic/js/jquery.scrollmagic.js",
"handlebars": "./bower_components/handlebars/handlebars.runtime.js"
},
"browserify-shim": {
"jquery": "$",
"greensock-css": "CSSPlugin",
"fastclick": "FastClick",
"greensock-tm": "TweenMax",
"greensock-time": "TimelineMax",
"scrollmagic": "ScrollMagic",
"foundation": "foundation",
"handlebars": "Handlebars"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
Right now I almost have this worked out by doing this in my grunt file before I run the test.
grunt.registerTask("shimBowerForTests",function(){
var readJson = require('read-package-json');
var fs = require('fs');
var remapify = require('remapify');
readJson('./package.json', console.error, false, function (er, data) {
if (er) {
throw "There was an error reading the file";
}
var packages = data.browser;
var browserify = require('browserify');
for (var key in packages){
var b = browserify();
var wstream = fs.createWriteStream("devjs/test/modules/"+key+'.js');
b.add(packages[key]);
b.bundle().pipe(wstream);
}
});
});
and.
exec: {
jestTest: {
command: 'cp -r devjs/modules devjs/test/modules && npm test'
}
}
The problem is that using browserify so combine everything for the browser works great with my setup and I can require my shimmed modules like this.
require('jquery') //example but in the jest cli the test fail because they can find the module unless I somehow prefix it with ./, like so require('./jquery')
I'm guessing that the problem is that you've only installed your shimmed modules with bower. If you want them to work in node/jest, you'll have to install them with npm as well. Then just make sure Jest isn't mocking anything in the node_modules directory, and it should find all the required modules in there as long as the names match up.
Your Jest config in package.json should look like:
"jest": {
"unmockedModulePathPatterns": [
"./node_modules"
]
}
And then just download all the dependencies.
npm install jquery --save-dev
UPDATE
Instead of using my below solution you should opt for using Karma,karma browserify. I have converted the below solution into using karma and it is working much much better.
----------------------OLD ANSWER
What I actually did to solve this was, used the Jest source preprocessor to rewrite the require statement to look for a module in a certain directory in my /tests/ folder that I have created using grunt. The Folder contains the files listed in my browserify-shim, browser section of the package.json file.
EDIT: Here is how I shim bower, I made this script in the Gruntfile.js that puts all the bower modules and any commonjs modules that I need into an accessible directory.
grunt.registerTask("shimBowerForTests", function() {
var readJson = require('read-package-json');
var fs = require('fs');
readJson('./package.json', console.error, false, function(er, data) {
if (er) {
throw "There was an error reading the file";
}
var packages = data.browser;
var shim = data['browserify-shim'];
var browserify = require('browserify');
var exclude = ["jquery.maskedinput", "jquery"];
for (var key in packages) {
var b = browserify();
var wstream = fs.createWriteStream("devjs/test/modules/" + key + '.js');
if (shim[key] !== undefined && exclude.indexOf(key) === -1) {
b.add(packages[key]);
b.bundle().pipe(wstream);
} else {
var rstream = fs.createReadStream(packages[key]);
rstream.pipe(wstream);
}
}
});
});
Then in the Jest pre processor file I do this.
module.exports = {
process: function(src, path) {
var src2= src.replace(/require\([\"\']([^\.\'\"]+)[\"\']\)/g, "require(\'../modules/$1\')");
src2= src2.replace(/jest\.dontMock\([\"\']([^\.\'\"]+)[\"\']\)/g, "jest.dontMock(\'../modules/$1\')");
return src2;
}
};

Resources