when i read the babel config file document that Babel will automatically search for a babel.config.json file, im curious about how babel find the babel.config.json and apply it, can somebody show me the code, thanks
Related
I am learning gulp and practicing writing gulpfile.js. gulp is for transforming js etc files. however, if I want to write gulpfile.js using es6, I may need to involve babel. I notice the following doc: https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles#transpilation
but I still am still confused. why I rename this file and how does it compile 'import' syntax? "gulpfile transpilation documentation" is broken. please help
Thanks
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
Maybe the title is a bit strange, but I can't seem to find anything about on google.
Question: I have a folder that only contains .ts files and .json files.. Typescript compiles the .ts files and puts it into a separate directory (not as a bundle, just the directory structure 'as-is').
Src /
Workers /
[ModuleA.ts, ModuleA.json],
[ModuleB.ts, ModuleB.json],
[MobuleC.ts, ModuleC.json]
Most of the time I can just require('*.json') and the JSON file will be also placed in to build directory.
But now I have a situation, where importing the JSON will make no sense, because the JSON file gets updated every few seconds and I read the file with fs.readFile('*.json'), so I also don't want it floating around in the v8 cache (through require)
So how do I 'include' a JSON/None-Typescript file into the build, that is not explicitly being importing by either require or import?
For now I just used gulp to copy every .json file in the src folder over to the the respective dist/** folder.
But still find it strange typescript doesn't have something included for it..
Maybe you should checkout --resolveJsonModule, it's a newer feature of typescript.
I'm new to webpack and trying to figure out how to use my own html file in the webpack-dev-server, as well as my webpack build.
in my app.js I have:
require('!jade!index.jade')
but that does not make an index.html as I would expect. Instead, it seems at best I can get a string output of my html, which isn't what I want:
var jade = require('!jade!index.jade')
jade() //outputs my html
How do I get it to output an index.html file? How do I get the webpack-dev-server to use that html file?
I should also mention my jade file will likely reference stylus files
I use jade-html-loader with the following entry in webpack.config.js:
entry: ['./src/app.js', 'file?name=index.html!jade-html!./src/index.jade']
You will need
npm install --save-dev file-loader jade-html-loader jade
With the Less plugin I got a nice Less -> Css compilation whenever I save the file. How to get the same behavior with Babel to have ES6 code transpiled to ES5? Thanks
Edited after #lukas-kabrt suggestion:
The less2css Sublime plugin, utilizes the on_post_save() event of the Sublime API, to listen for a file Save and then trigger the code that will compile the .less file automatically. Something similar can be accomplished for Babel ES6-to-ES5 compilation, by using this event in a plugin, and linking it to an external command that will auto compile the current file using Babel. This is a simple plugin for ST2, written in Python, that accomplishes this:
import sublime, sublime_plugin,os
from os.path import dirname, realpath
class BuildonSave(sublime_plugin.EventListener):
def on_post_save(self, view):
es6File = view.file_name()
filename, file_extension = os.path.splitext(es6File)
if file_extension == ".es6":
view.window().run_command('exec',{'cmd': ["/usr/local/bin/babel", es6File, "-o", filename+".js", "--source-maps", "inline"] })
Note: This plugin looks for .es6 suffixed files and compiles them to the appropriate .js file, e.g. myfile.es6, will be transpiled into an ES5 myfile.js file.
The cmd location /usr/local/bin/babel can be obtained on your system by running the which babel command on the terminal, if you're on Mac OS X.
Source code can also be found here: https://gist.github.com/kostasx/1d55c62edcee88375fc8
You can checkout the Sublime Plugin API documentation, if you want to mingle with the code above a little more.