Need to understand gulp - gulp

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

Related

How to investigate "Cannot find module X" coming from browserified bundles?

Desperate mode: Tried many different configs and all failed. I have a browserified + babelified bundle called videomail-client.js here:
https://github.com/binarykitchen/videomail-client/tree/develop/dist
The package.json's main entry of that package is pointing to this file.
Now, when I require() that package from another project within and browserify it, then I see this error from the gulp task using browserify:
[16:26:32] Error: Cannot find module './keys' from '/home/michael-heuberger/code/videomail.io/node_modules/videomail-client/dist'
at /home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
at load (/home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:152:21)
Hmnmm, sounds complicated? Let me rephrase. Package videomail-client is browserified. Another project, videomail.io, is requiring it and browserifying all together over again with other packages. That's there it fails.
On a side note, when I run standalone examples using videomail-client.js, it works fine.
I think the problem is that browserify can't resolve the ./keys file. But it should be included in the browserified videomail-client.js package and resolved from there. How can I tell browserify to resolve it the correct way?
Suggestions welcome how I can investigate and fix this best. Thanks!!
The solution has two steps: use browserify's standalone option and the gulp-derequire package. It works now.
This sounds a lot like a problem I ran into a few years ago (and yes, it is tough to describe :) )
I never got an answer but maybe you'll have better luck. The solution I eventually went with was to not attempt to re-browserify already-browserified libraries; I ended up just concatenating it in and minifying the whole bundle afterwards.

How to remove an unnecessary entry point in gulp setup with webpack-stream?

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.

Sails.js asset management and referencing

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 :).

Using Compass in PHPStorm 7

So i'm using brand new PHPStorm 7, which is supposed to have full Compass support, with syntax highlighting and stuff.
I successfully install compass to my project directory, PHPStorm offers me to use compass sass watcher, automatically finds compass.bat and my config.rb .
And then, nothing happens - my #import "compass" still triggers unable to resolve import from watcher, i don't get any code completion or search features. The only solution i know was an old trick of adding compass stylesheets directory as a resource root to my project.
So what i'm asking - is this the way it's supposed to be, or am i doing anything wrong, because i don't think manually importing a library into every project is a proper way for supposed library support.
After all, there is an issue on Windows.
There's the solution, and it works. Thanks LazyOne.
http://youtrack.jetbrains.com/issue/WEB-9139

How to setup limeJS in a totally offline workspace

I'm trying to setup limeJS, the issue is the Internet connection is a problem. I had closure library, box2d, closure compiler and closure templates downloaded separately as .rar files, but I can't find a guide anywhere to set it up like this, everyone just uses(and with reason!!!) the python bin/lime.py init command to get it working. I managed to figure out(yay!) how to setup box2d and closure library but what about the other two?
My laptop is running 64 bits Windows 7. Any help appreciated
All I need is an advice on directory structure, like where to drop the compiler.jar and soy templates .js files, so that when I run the update/create command it doesn't try to download the compiler or templates like it does right now.
I got it working, after taking a quick look at the lime.py file it told me everything I needed, for example both the SoyJs templates file and the compiler need to be in the /path/to/lime/bin/external folder and for example, the lime.py file was expecting a compiler file named compiler-dateOfLatestCompiler.jar instead of compiler.jar.
In general, If you have LimeJS built up in one machine using Python and all, you can just copy paste the whole package anywhere you want and use it just as ususal.
You don't need network once you have all the files/codes for Lime is downloaded.
Infact, you dont even need python for normal development tasks(Python is required to build your js file once you complete development though)