I'm trying to get gulp-babel working as the only other way I've been able to do it is with webpack at the moment. It's all great that you can do your single layer script but the minute you start doing imports it doesn't include the script. For example I'll do import $ from 'jQuery'; and all it provides in my rendered js is:
var _jQuery = require('jQuery');
var _jQuery2 = _interopRequireDefault(_jQuery);
Where as I'm expecting the jQuery code to compile into the top of the file. It's precisely this reason why I'm moving over to webpack which is an even bigger ball ache for most anything else that gulp handles easily! Dev's think it's not but just like with pregnancy & birth it's easily forgotten, the pain and heartache leading to the wonderous outcome.
Does anybody have any advice on this.
thank you in advance :-)
Related
I am using JsStore with angular 6 and I am getting this error when try to import it with file-loader
" import * as workerPath from 'file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.js' ".
It show cannot find module 'file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.js'.
Adding the extra folder with worker.d.ts file doesn't help in angular library generated with the new 'ng generate library' because the library use roll-up instead of web-pack and doesnt has a file-loader. Could you suggest me another way to import jsstore.worker.js, please?
There are multiple approach to do it -
You can copy the jsstore script in a folder then supply the path of the worker to jsstore instance.
e.g -
var con = new JsStore.Instance(new Worker('path of the jsstore worker script'));
But it would be better if we can include the script directly into the code, so that webpack or any other module bundler can take care of everything. We need to find a way to do it.
Another approach would be to run jsstore without worker (i dont recommend it, as it is slower). Check out the example - https://github.com/ujjwalguptaofficial/JsStore/tree/master/examples/ts%20without%20worker
Hope this helps.
I am new to gulp and i am getting object expected gulp error, but found solutions as rename file to gulfile.js
1) Need to understand every project has only one gulp file thats gulpfile.js? If i need to define more than one then how to and what will be the file name.
2)My requirement is to concatenate more than one less(convert to css) & js file into one and then apply it to index.html
3) I am using express to create gulp project structure. is this standard way? if no then how do i?
4) everytime i create gulp skeleton, do i need to install all packages again for every project?
Any references from where can learn gulp from basic.
I think one of the reasons you're getting downvoted is that on SO each question should be one question. This should really be four separate questions. Another reason is you haven't provided any of your code - add code (the { } icon) and include your gulpfile.js and your package.json.
1a) Yes, it has to be called gulpfile.js
1b) If you search SO and google for "multiple gulpfiles" you'll get a lot of solutions. If none of them work for you, let us know what you tried and what went wrong. But just so you know, it's better to start with just one gulpfile - it can be hard to get multiple gulpfiles working correctly, and using just one will help you learn gulp.
2) you'll need to use gulp-less and gulp-concat to turn multiple LESS files into one CSS file, and gulp-concat again to turn multiple js files into one.
3) You can use express, but you don't have to do. It depends what you're doing, and we have no idea what you're doing.
4) Not sure what you mean by "gulp skeleton". If you mean "Do I need to run npm install for every new project, yes you do.
5) Google "learn gulp"
6) If an image could just be text, it's better to just include the text.
If you need to, open new specific questions. For more on writing a great SO question, see https://stackoverflow.com/help/how-to-ask
I'm new to webpack - been using gulp for a couple of years now. Combining the two is a great learning experience because it's exposing some things I took for granted before. Like below, I have a webpack.config.js that has an multiple entry points and an output. I got this config from the webpack-stream documentation, and it all makes sense to me except one part:
Gulp also has an entry point, called entry.js. I couldn't think of another way to do it so I created a blank file named entry.js and just stuck a console.log in there.
gulp.task('webpack', function() {
return gulp.src('./src/script/entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('./dist'));
});
Running gulp webpack does exactly what I expect it to except my console statement disappears. What's the purpose of entry.js? Why does it seem to evaporate? Is there a way to just not begin my task with gulp.src()? I think I'm missing something when it comes to how pipes work.
I have some code from gitHub I'd like to run in GAS, but it uses a library (chance.js) I don't know how to install.
I have looked at the documentation here, and tried to follow the steps but I don't have a project key (because nobody's used it in GAS?).
I see that I might be able to call it from my script (?), but I don't even know how to start with that - I am a novice at this.
Is there a simple way to add this library? Can you point me to any resources?
Download the development version of chance.js. Open it and copy the whole text. Then go to your Apps Script editor, create a new script (File/New/Script File) and paste the text into there. Then at the bottom of the chance.js code (but before the closing parenthesis) you need to add chance = new Chance();
btw. In Apps Script every single time you start a function manually or through a trigger, all the js code in all js files belonging to the project is being executed and only afterwards is the selected function run. Of course that doesn't mean that the code inside of all the functions is being run.
edit:
Here is a better approach.
Change the start of chance.js from (function () { to Chance = (function () {. And then change the end from })(); to
return Chance;
})();
chance = new Chance();
Sorry for the noob question but I'm trying to start up a new application with Sails and include my assets. I'm using Bower to manage my packages for things like Bootstrap and JQuery. I had a read of this question and added a .bowerrc file which is now installing my Bower components to /assets.
I'm now confused as to how I should proceed to add these files into my project. It seems as though I can't just do a <script> tag in the header as I'm used to because it's giving me a file not found. Reading through the sails documentation it seems like Grunt should be creating a .tmp/public/assets folder in my project, but whenever I run sails lift and go to .tmp/ there is nothing in there.
I also read in the documentation that I should be using some kind of asset injection, I tried adding this to my HTML and it seems like it doesn't do anything.
My other question is around how I go about referencing images in my HTML. Obviously I can't just do something like src='assets/images/image.png, how should I go about this? Is there something really obvious that I'm missing?
Sails use grunt tasks to do lot of things during lift and build. You can get much better look how everything work if you take some time and check what is inside Gruntfile.js from root of your sails project.
About your specific question here is some information:
- from sails docs: "In order to take advantage of asset injection, minification, and concatenation you must put your assets in folder under assets/linker". This exactly mean that everything what you will put inside assets/linker directory will be affected by grunt tasks during lift. It mean that all files/directories from linker will be copy to .tmp/public and also some of that files will be processed before saved to .tmp/public.
- About adding tags. If you take a look at Gruntfile.js you will find this variables: var cssFilesToInject = [...] and var jsFilesToInject = [...] which contain files that will be automatic added to layout header during sails lift.
- About your 'other question', yes you can do something like 'src='linker/images/image.png' if you move that files to linker directory (assets/linker).
I hope this help :).