i'm trying to compile my jade files for an SPA with grunt, and it works ... well, "works..."
my folders:
app
views
build
any compiled .html
any .jade file
index.jade
index.html
and my gruntfile.coffee task:
jade:
compile:
options:
pretty: true
files:
[
extend: true
flatten: true
cwd: 'app/views'
src: '**/*.jade'
dest: 'app/views/build'
ext: '.html'
]
compileIndex:
options:
pretty: true
files: 'app/index.html': ['app/index.jade']
Well, i read another questions here like Grunt compiling Jade files but i can get it work fine, when i try to run grunt jade, two things happens; compileIdex works totally fine,but, when compile task run:
Running tasks: jade:compile
Running "jade:compile" (jade) task
Verifying property jade.compile exists in config...OK
Files: prueba.jade -> app/views/build
Options: namespace="JST", separator="\n\n", amd=false, pretty
>> Source file "prueba.jade" not found.
>> Destination not written because compiled files were empty.
So what i'm doing wrong here? I need to keep separate compilations, index and views.
Related
When I try to gulp watch, I get the following error:
[15:46:56] Task never defined: watch
[15:46:56] To list available tasks, try running: gulp --tasks
Here are my functions from gulpfile.js.
function watchChanges(cb) {
watch(['assets/js/*.js'], parallel(buildSiteJS));
watch(['assets/scss/style.scss', 'assets/scss/**/*.scss'], parallel(compileStyleSCSS));
watch(['**/*.php'], parallel(reloadPage));
cb();
}
With the ending export statement like:
exports.default = parallel(serveBrowserSync, mainTasks, watchChanges);
I'm not sure if the syntax is incorrect causing the 'task never defined' error and I've tried a lot of searching online and not got anywhere with it.
Let me know if you need to see more of the gulpfile.js.
Gulp: 4.0.2
Gulp Babel: 8.0.0
I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.
However, for both of them angular throws the same error
argument module is not a function
when using them in ES6 syntax as follows:
import AngularRoute from 'angular-route';
angular.module('app', [AngularRoute]);
I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular-route": "github:angular/bower-angular-route#1.5.8",
"angular-translate": "github:angular-translate/bower-angular-translate#2.11.1",
}...
EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e
on the following line in angular.js
return new ErrorConstructor(message);
which I guess is a bit of progress but still doesn't solve my issue obviously
EDIT#2: I got angular-route to work with the help of #artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did
EDIT#3: I have overriden the package configuration as you can see below, though that didn't help
"npm:angular-translate#2.11.1": {
"format": "global",
"dependencies": {
"angular": ">=1.2.26"
},
"shim": {
"angular-translate": {
"deps": "angular"
}
}
}
I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using
jspm install npm:angular-route
&
jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'
The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue
Here is not-so-minimal, not-really-self-contained example for angular-translate with systemjs:
npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate
keep pressing <ENTER>, accepting all the default values
create file test.js
import AngularTranslate from 'angular-translate/angular-translate';
console.log(AngularTranslate);
create file index.html
<!doctype html>
<html>
<head>
<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
System.import('./test.js');
</script>
</head>
<body>
</body>
</html>
open it in the browser:
Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate#2.11.1.js(…)
Why that file isn't there? It's supposed to be created by jspm, if you had installed angular-translate from npm it would have contained
module.exports = require("npm:angular-translate#2.11.1/dist/angular-translate.js");
which is just a redirect from symbolic package name (the name of that .js file) to that package main file, as specified in package.json:
"main": "dist/angular-translate.js",
But angular-translate is from github, there is no dist there. That's why jspm did not create the redirect file - there is nothing to redirect to.
No problem, just build it from the source we got from github:
cd jspm_packages/github/angular-translate/angular-translate#2.11.1/
npm install
npm run-script build
cd ../../../..
and fix mapping in config.js:
map: {
"angular-translate/angular-translate": "github:angular-translate/angular-translate#2.11.1/dist/angular-translate",
open index.html in the browser again:
system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)
No problem, angular is already installed as angular-translate dependency, just tell systemjs when and how to load it.
add to config.js:
meta: {
"angular-translate/angular-translate": {
"deps": ["angular"]
}
},
map: {
"angular": "github:angular-translate/angular-translate#2.11.1/node_modules/angular/angular",
NOTE: You don't need to specify format for angular-translate. SystemJS auto-detects it correctly - it could be loaded as either 'amd' or 'cjs', but it will not work as 'global'. Also, you probably did not start by installing angular-translate, so you already have angular.js file and mapping in place somewhere.
Open index.html in the browser again. It prints in the console:
pascalprecht.translate
Yes angular-translate exports a string - seems to be typical for angular1 modules.
I have no experience with angular.js, so I declare it a success and stop here.
PS Why angular-route worked when you install it from npm, and did not work from github?
When installed from npm, jspm created a file named jspm_packages/npm/angular-route#1.5.8.js, containing
module.exports = require("npm:angular-route#1.5.8/index.js");
because package.json for angular-route has
"main": "index.js",
which is correct and works for you.
When installed from github, jspm created similar file jspm_packages/github/angular/bower-angular-route#1.5.8.js, but this time it points to a different file
module.exports = require("github:angular/bower-angular-route#1.5.8/angular-route");
because someone put an override in jspm registry there at https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json
because bower.json for bower-angular-route has
"main": "./angular-route.js",
Maybe it's an oversight, maybe it's correct and works for them - I don't know.
TL;DR It's not a good idea to use package manager for installing software, if the software was not packaged properly for that package manager.
I have this code:
"use strict";
import browserSync from "browser-sync";
import httpProxy from "http-proxy";
let proxy = httpProxy.createProxyServer({});
and I have installed babel-core and babel-cli globally via npm. The point is when I try to compile with this on my terminal:
babel proxy.js --out-file proxified.js
The output file gets copied instead of compiled (I mean, it's the same as the source file).
What am I missing here?
Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:
npm install babel-preset-env
and run
babel --presets env proxy.js --out-file proxified.js
or create a .babelrc file containing
{
"presets": [
"env"
]
}
and run it just like you were before.
env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing
{
"presets": [
["env", { "targets": { "node": "true" } }],
]
}
to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.
Most of these answers are obsolete. #babel/preset-env and "#babel/preset-react are what you need (as of July 2019).
I had the same problem with a different cause:
The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.
I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.
First ensure you have the following node modules:
npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader
Next, add this to your Webpack config file (webpack.config.js) :
// webpack.config.js
...
module : {
loaders : [
{
test : /\.js$/,
loader : 'babel',
exclude : /node_modules/,
options : {
presets : [ 'es2015', 'stage-2' ] // stage-2 if required
}
}
]
}
...
References:
https://gist.github.com/Couto/6c6164c24ae031bff935
https://github.com/babel/babel-loader/issues/214
Good Luck!
As of 2020, Jan:
STEP 1: Install the Babel presets:
yarn add -D #babel/preset-env #babel/preset-react
STEP 2: Create a file: babelrc.js and add the presets:
module.exports = {
// ...
presets: ["#babel/preset-env", "#babel/preset-react"],
// ...
}
STEP 3:- Install the babel-loader:
yarn add -D babel-loader
STEP 4:- Add the loader config in your webpack.config.js:
{
//...
module: [
rules: [
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader')
]
]
//...
}
Good Luck...
npm install --save-dev babel-preset-node5
npm install --save-dev babel-preset-react
...and then creating a .babelrc with the presets:
{
"presets": [
"node5",
"react"
]
}
...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1
https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react
Same error, different cause:
Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.
Turns out I opened the .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.
fix your .babelrc
{
"presets": [
"react",
"ES2015"
]
}
In year 2018:
Install following packages if you haven't yet:
npm install babel-loader babel-preset-react
webpack.config.js
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'] // <--- !`react` must be part of presets!
}
}
],
}
Ultimate solution
I wasted 3 days on this
import react from 'react' unexpected identifier
I tried modifying webpack.config.js and package.json files, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.
What worked? Two words: npm start. That's right.
run the
npm start
command in the terminal to launch a local server
...
(mind that it might not work straight away but perhaps only after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)
I found that info on this neat page. It's in Polish but feel free to use Google translate on it.
I have a website based on Jekyll and I want to make it as fast as possible. My goal is to have a gulp task that builds the Jekyll site, generates the critical CSS and minifies the HTML.
Part of my gulpfile looks something like this:
gulp.task("jekyll", function (gulpCallBack){
var spawn = require("child_process").spawn;
var jekyll = spawn('jekyll', ["build"], {stdio: "inherit"});
jekyll.on("exit", function(code) {
gulpCallBack(code === 0 ? null : "ERROR: Jekyll process exited with code: "+code);
});
});
gulp.task("html", function() {
gulp.src("./_site/index.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site"))
gulp.src("./_site/*/*.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site/./"))
});
gulp.task("critical", function() {
critical.generate({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
minify: true,
extract: true,
width: 320,
height: 480
});
critical.inline({
base: '_site/',
src: 'index.html',
dest: 'index.html',
minify: true
});
})
If I run the tasks separately, gulp jekyll, then gulp html and finally gulp critical everything works fine and as I want to. Since I am lazy I do not want to run three tasks manually each time. My idea was to run them synchronously/one after the other by using the following code.
gulp.task("jekyll", function (gulpCallBack){};
gulp.task("html", ["jekyll"], function() {};
gulp.task("critical", ["html"], function() {};
I thought, I just could run gulp critical which waits for the html task to finish which waits for the jekyll task to finish. The site got build and minified but the critical CSS is not injected. The task run in the correct order.
➜ jonas.re git:(master) ✗ gulp critical
[19:21:18] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:21:18] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:21:18] Finished 'jekyll' after 528 ms
[19:21:18] Starting 'html'...
[19:21:18] Finished 'html' after 5.37 ms
[19:21:18] Starting 'critical'...
[19:21:18] Finished 'critical' after 1.63 ms
Again, by running them manually after each other, it works perfectly.
I heard of runSequence but I have to return a stream which I have no idea of to do that for the jekyll task (if that is even possible?). And maybe the error something different since this works:
➜ jonas.re git:(master) ✗ gulp jekyll
[19:27:49] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:49] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:27:50] Finished 'jekyll' after 549 ms
➜ jonas.re git:(master) ✗ gulp html
[19:27:54] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:54] Starting 'html'...
[19:27:54] Finished 'html' after 5.56 ms
➜ jonas.re git:(master) ✗ gulp critical
[19:27:57] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:57] Starting 'critical'...
[19:27:57] Finished 'critical' after 1.66 ms
I would be very thankful for any help. You can have a look for my whole gulpfile here.
The problem come from critical. I get it working like this :
_config.yml
As we need style.scss to be parsed in order to generate a css for crititical.
Remove /css/style.scss from the exclude array.
style.scss
./_sass path is useless a it is the default path for Jekyll sass processor.
In order to be processed, this file needs an empty front matter.
---
---
#import "_assets/fonts.scss";
#import "_assets/mixins.scss";
#import "_assets/reset.scss";
#import "_assets/colors.scss";
#import "_assets/syntax-highlighter.scss";
#import "_modules/header.scss";
#import "_modules/content.scss";
_includes/head.hmtl
Critical needs a link to original style sheet.
Remove the css loading script and replace it with
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
The loading script will be inserted by critical.
gulpfile.js
You can now chain yours tasks. Note that I've changed the critical method to generateInline.
gulp.task("jekyll", function (gulpCallBack){
...
gulp.task("html", ["jekyll"], function() {
...
gulp.task("critical", ["html"], function() {
critical.generateInline({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
htmlTarget: 'index.html',
minify: true,
extract: true,
width: 320,
height: 480
});
})
Bim !
It seems that there is not really a way to run gulp tasks synchronous. But your shell is able to run commands synchronous with the && operator.
I now use a gulp module called gulp-shell. Here is how my code looks:
gulp.task('build', shell.task([
'gulp jekyll && gulp critical && gulp html'
]));
So I am able to just run gulp build to run the gulp tasks jekyll, critical and html in order. Though this works, I am not really happy with this solution. If anybody knows a better solution, please let me know.
I typically use the _includes folder within Jekyll to do the inlining for me. All you have to do is gulp.dest('_includes') — you can call gulp.dest() multiple times in a row.
Sample task in gulpfile
Then add a line to your main page template in Jekyll:
<style type="text/css">{% include main.min.css %}</style>
See the Jekyll source code in context
I try to make a .JAR from a simple ruby sample. In MRI and jRuby i can run this without problem but when i try to warble the project i get error when i run the JAR file.
Errno::ENOENT: No such file or directory - configuration.yml
The configuration.yml file is not in the project folder because is needs to be editable so shouldn't be in the JAR included, optimally the path would be relative to the jar so that the YML file is in the same folder as the JAR file. So how could i do this ?
My bin\sample.rb
require 'yaml'
#conf = YAML::load_file "c:/test/configuration.yml"
##conf = YAML::load_file "c:\\test\\configuration.yml"
puts #conf['username']
My c:\test\configuration.yml
username: test
My .gemspec file
Gem::Specification.new do |spec|
spec.require_paths << '.'
}
My config\warble.rb
Warbler::Config.new do |config|
config.jar_name = "sample"
end
I warble with "warble jar -trace" and get no errors
I use jruby-1.7.4 and warbler-1.3.8.
Figured it out without using java as some solutions on the web suggest (but not for warble).
require 'yaml'
scriptpath = __FILE__[/(.*)\/.+\.jar!/]
yamlpath = "#{$1[6..-1]}/configuration.yml"
#conf = YAML::load_file(yamlpath)
puts #conf['username']
# => test