Custom Gulp build not loading css

ionic-v1
1

I’m trying to move an application over from a Grunt build to Gulp. My Gulp build generates a ionic.css file which I attempt to load with a link tag in my index.html. I get an error in my chrome inspector that the file is not found at that path even though I can see in my www folder that it is.
My Code
gulp-sass task

gulp.task('styles', ['clean-styles'], function () {
  gulp.src( './app/lib/scss/ionic/ionic.scss' ) //get the sass files
    .pipe(sourcemaps.init())                    //load internal sourcemap
      .pipe(sass())                             //convert sass to css
    .pipe(sourcemaps.write())                   //write inline sourcemap
    .pipe(gulp.dest( './www/lib/css/' ));       //push the css to www/lib/css 
});

index.html head

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/css/ionic.css" rel="stylesheet">
  </head>

My directory structure

my_app
    -app
        -lib
            -fonts
            -js
            -scss
        -src
            -images
            -scss
            -page_view1
                -templates
                page_view1_controller.js
            -page_view2 
                -templates
                page_view2_controller.js
-hooks
-node_modules
-platforms
-plugins
-www
    -img
    -js
    -lib
        -css
            ionic.css
        -fonts
            -ionic
                ionicons.eot
                ionicons.svg
                ionicons.ttf
                ionicons.woff
        -js
            -angular
            -angular-animate
            -angular-bootstrap
            -angular-sanitize
            -angular-ui-router
            -collide
            -ionic
                ionic-angular.js
                ionic.bundle.js
                ionic.js
            -ngCordova
   cordova.js
   cordova_plugins.js
   device.js
   keyboard.js
   index.html
gulpfile.js
ionic.project
package.json
2

I’m not sure I get Your file structure completely, is “app” directory inside “my_app” directory?

3

yes, the app directory is where I’m dividing all library files(ionic, angular, etc) and source files( the sass, templates, controllers, etc) that I write. Gulp then runs the various tasks I’ve setup pulling files from the app directory, compiling, minifying and what not before pushing them to the respective subdirectory inside the www directory

4

OK, so the CSS files are correctly generated inside www directory, but are not found on page load, correct?

Can You check and paste here the path were the browser is looking for the css files?

5

That is correct. Here is a screen shot. The file structure is on the left and you can see the error message regarding not being able to find the file in Chrome on the right.

6

Why is Chrome looking in file:///assets? Can You show me how You call Your CSS files inside index.html?

7

From a link tag inside the head tag as I posted in my initial post.

8

Yes, from a link in index.html. But are You looking for Your css files in file:/// instead of http:// on purpose? I wondered how your link was written, not where it was :slight_smile: