We Keep Coding

Gulpfile not outputting to correct location

So I'm trying to set up the basic gulp workflow with sass and I am missing something, but I can't find it. I've searched the web for a workflow example with dist/src folders, NOBODY takes you step by step on how and why things are done.
Anyway, I have a basic folder project with dist, src, node_modules, gulpfile.js and package.json.
My main problem is that the outputted src/sass/main.scss is not outputted into dist/css/main.css. This works only if I create a src/css/main.css file and the outputted .css file is generated there, although I clearly have .pipe(gulp.dest("dist/css")) in my gulpfile.js.
Here's my gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./src"
});
gulp.watch("src/scss/*.scss", ['sass']);
gulp.watch("src/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
And in my html file I'm linking the .css with this:
<link rel="stylesheet" type="text/css" href="css/main.css"/>
I haven't even tried to add more plugins into gulp because for the life of me I can't figure out why this doesn't work.
Directory tree to make things easier to understand:
|-dist
|-css
|-main.css
|-img
index.html
|-node_modules
|-src
|-css
|-main.css
|-img
|-sass
|-_custom.scss
|-main.scss
index.html
gulpfile.js
package.json
Can someone please explain why I need to run the server in src and not dist?
Does gulp generate the sass and then knows how to copy it to dist?
What is actually wrong in my gulpfile?

in src there is no scss folder that you are targeting with
return gulp.src("src/scss/*.scss")
try to fix that first

gulp concat javascript files in order same as in index.html

I would like use gulp-useref for concant js files in same order as in index.html.
Solution has this structure:
Solution Folder
App Folder
Services Folder
service.js
Scripts Folder
angular.js
index.html
<script src = "scripts/angular.js"></script>
<script src = "app/services/service.js"></script>
Gulp
gulp.src("index.html")
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(concant("app.js"))
.pipe(gulp.dest(config.dist + "/app"));
When I run this gulp task app.js file is created but contains content of index.html.
What I do wrong?

Using GULP to load Jquery CDN and other external JS sources

I've been trying to find a definitive answer to a problem I'm having using GULP to load the latest jquery CDN or any other Javascript CDN external sources.
What I've got so far is all our JS files being found in a folder, concatenated to a single file and placed in a new folder called min. Ideally I'd like to also link into the concat process the jquery CDN's and other external js files.
Does anyone know what is the best way to do this?
Here is the code I've got so far:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var notify = require('gulp-notify');
gulp.task('js', function () {
return gulp.src('js/**/*.js') //select all javascript files under js/ and any subdirectory
.pipe(concat('mynewfile.min.js')) //the name of the resulting file
.pipe(uglify())
.pipe(gulp.dest('min')) //the destination folder
.pipe(notify({ message: 'Finished minifying JavaScript'}));
});
gulp.task('watch', function() {
gulp.watch('js/**/*.js', ['js']);
});
gulp.task('default', ['js', 'watch']);

As far as I know, Gulp is a helper to manage your project locally, not by connecting to external sources.
A common approach would be to manage current library versions by a package manager like Bower – there is an integration bridge available (didn't test it though, I just update packages manually).

How to handle angular module dependencies in other directories?

Let's say that, I have a main module:
angular.module('myApp', ['myApp.view1']);
And the other module
angular.module('myApp.view1', ['ngRoute'])
the second one is in another directory in the project.The first module cannot find it's dependency, only if I also add
<script src="view1/view1.js"></script> in the index.html
,but it quickly becomes pretty hard to manage by hand, if one has lots of javascript files.
What is the best way to manage dependencies between angular modules, so that they can recognize each other?

You can use a task runner like grunt or gulp and concatenate all the javascript files during the build step and include that one file in your index.html file. I use gulp and here is a sample gulp task that helps you concatenate all the JS files using the gulp-concat plugin.
gulpfile.js
var gulp = require("gulp");
var concat = require("gulp-concat");
//if all your source js files are inside the src directory
var srcJs = ["src/**/*.js"];
gulp.task("js", function() {
return gulp.src(srcJs)
.pipe(concat("app.js") // concat into 1 file called app.js
.pipe(gulp.dest("dist"); //save app.js in dist directory
});
So add this gulpfile.js in your project root folder and every time you make code changes, go to the project root folder in the command line and run the command "gulp js". This will run the js task and concatenate all your JS files and store it in a file called app.js in the dist directory. And in your index.html file you can always point to this one file dist/app.js.

They can only recognize each other, if they are added as script files. A best practice is to minify all of the javascript files within your directory structure into one file before publishing.

How to make the node.js server also send js files?

I have a node.js file server running which (when visited) returns a html content. Also in the same directory of the node.js file, there is a javascript file called test.js. Also in the html content being returned, I need to load that javascript file. However in the html content, being returned, which comes out to be called index.html, the script looks like
<script type="text/javascript" src="test.js"></script>
But the server isn't sending the test.js file, its only sending the index.html file, and the script link is loading it relatively from the same directory.
Now I don't want to give the url to the test.js file. I want the node.js file to also send the test.js file, so that it ends up in the same directory as index.html. And then index.html can load it from the same directory.
Is there a way I can specify in the node.js with code to also send the test.js file?
Thanks.

Are you familiar with Express, as dandavis mentioned? Express allows you to set a directory for your static files. See my standard config below:
app
.use('view engine', jade)
.use(express.compress())
.use(express.limit('10mb'))
.use(express.bodyParser())
.use(app.router)
.use(stylus.middleware({
src: __dirname + '/www',
compile: function(str, path) {
return stylus(str)
.set('filename', path)
.set('compress', false)
.set('warn', true);
}
}))
.use(express.static(__dirname + '/www'))
.use(express.logger());
The important part here is second from the bottom. Essentially, Express now knows to look for any assets you specify in your HTML within that static directory. For me, I create a folder titled WWW within my server folder, then add to it my JS, CSS, and images.
For example, say I create the "stylus" folder within my WWW folder, and add to it store.css. My link to that CSS asset would be the following in my Jade template:
link(rel="stylesheet", type="text/css", href="stylus/store.css")
Express knows to look for that asset relative to the __dirname + '/www' path, and thus locates the "stylus" folder and the CSS assets it contains. Hope this helps, and that I haven't ventured away from your intent!