Arrange documents within gulp-inject index function

I have encountered an Angular error due to the sorting of my files, so I am attempting to organize them properly.

This is the content of my Gulp file:

var gulp = require('gulp');
var angularFilesort = require('gulp-angular-filesort');
var naturalSort = require('gulp-natural-sort');
var inject = require('gulp-inject'); 

gulp.task('index', function () {
  var target = gulp.src('./public/index.html');
  var sources = gulp.src(
      ['./**/*.js', './**/*.css'],
      {
        read: false,
        cwd: __dirname + "/public/",
      }
    ).pipe(angularFilesort());

  return target.pipe(inject(sources, { addRootSlash: false }))
    .pipe(gulp.dest('./public'));
});

The current order in which the files are sorted is as follows:

    <!-- inject:js -->
    <script src="app.js"></script>
    <script src="controllers/add.js"></script>
    <script src="controllers/main.js"></script>
    <script src="filters/fromNow.js"></script>
    <script src="services/show.js"></script>
    <script src="vendor/angular-cookies.js"></script>
    <script src="vendor/angular-messages.js"></script>
    <script src="vendor/angular-resource.js"></script>
    <script src="vendor/angular-route.js"></script>
    <script src="vendor/angular-strap.js"></script>
    <script src="vendor/angular-strap.tpl.js"></script>
    <script src="vendor/angular.min.js"></script>
    <script src="vendor/moment.min.js"></script>
    <!-- endinject -->

Additionally, here are the folders for reference:

https://i.sstatic.net/vThl1.png

and the displayed console errors:

https://i.sstatic.net/aKBvk.png

Could you please advise on what might be missing or causing this issue?

Answer №1

Avoid including the {read: false} option in your code. The plugin gulp-angular-sort requires access to the file contents in order to work properly, and using read: false prevents it from doing so.

Referencing the documentation:

IMPORTANT It is advised not to utilize the read option with gulp.src! This plugin examines the content of each file to establish the sorting sequence.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Developing in Java Script with ENVDTE involves adding a new project to an existing solution and placing it in a designated sub-folder for organization purposes

Currently, I am working on developing a Visual Studio extension for a new C++ project template using Visual Studio 2010. The approach I am taking involves utilizing the .vsz template method and customizing the default.js code to suit my requirements. Withi ...

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

Having trouble with an unknown cipher when using the crypto module?

Encountering difficulty encrypting with aes-256 using cipher - getting an error stating unknown cipher. Any insights on what may be missing in the code below? index.js function encryptPaymentId(specialtyID, paymentId) { const convertToStrin ...

When attempting to create text with Three.js using the TextBufferGeometry method, an error arises indicating that the property yMax is unreadable due

While trying to add text to a three.js scene, I encountered the error message "Uncaught TypeError: Cannot read property 'yMax' of undefined". let loader = new THREE.FontLoader(); let font = loader.parse( jsonFont ); let geometry = new THRE ...

Exploring the power of AngularJS in manipulating Google Maps polygons with the help of ng-repeat

I recently started using a Google Maps plugin specifically designed for AngularJS, which can be found at . My goal is to display polygons on the map, so my HTML code looks something like this: <google-map center="map.center" zoom="map.zoom" draggab ...

How can you pick the element that is nearest to the top of a window?

My goal is to have a fixed list of page sections on the side that highlights the link of the section you're currently viewing as you scroll through the page. This is the code I've come up with: $(document).scroll(function(){ $allSections = $(&a ...

Analyzing DynamoDB Query

I am on a mission to recursively analyze a DynamoDB request made using the dynamo.getItem method. However, it seems that I am unable to locate a similar method in the DynamoDB SDK for Node.js. You can find more information about DynamoDB SDK at http://do ...

Customizing Header Design and securely passing authentication details?

As a newcomer to angular.js, I am attempting to include a custom header in a request. I have a function that is supposed to fetch a response from the service. function getInsuredWebAccount(insuredId) { }; var deferred = $q.defer(); ...

Best JavaScript approach for discovering time-dependent occurrences

In my Javascript code, I am working with an array of objects that have event start and end times stored as milliseconds. The current search algorithm in our codebase loops through the array until finding an event that contains a specific moment: // Lookin ...

There was a TypeError encountered while trying to read properties of undefined in Next.js version 13

I've encountered a problem in the title with my post API endpoint that I created in Next.js. The purpose of my endpoint is for form submission, where I gather inputs and send them to my email. Currently, my code successfully sends the email and I rec ...

If a value is located, select a new value from the identical object

Is it achievable to scan through an array of JSON objects? My goal is to locate a particular value within one of the objects and then extract other values from that same object. Is this possible? Appreciate any guidance. Thank you. ...

Supervising the organization of HTML sections for an offline web application

Currently, I am developing an offline HTML5 application that involves a significant amount of DOM manipulation through the creation of HTML strings within JavaScript functions. For example: var html=''; html+='<div class="main">&apos ...

Could someone please guide me on how to use JQuery to set a radio button as checked?

<input type="radio" name="sort" value="2" id="myradio"> Is there a way to set this as the selected option using JQUERY? ...

Deactivate the Discord JS button

Looking to create a Discord bot in TypeScript and wanting to disable two buttons when one is clicked, but unsure how to accomplish this. This is my command with the two buttons (warn.ts): import { PermissionsBitField, ButtonBuilder, ActionRowB ...

Merge the values of two select tags into a single textbox

There are two select Tags along with a text box included. <select name="select1"> <option>1</option> <option>2</option> </select> <select name="select2"> <option>1</option> <option>2 ...

Incorporate a for loop in Javascript to add a variety of items (object1, object2, and object3) to an array

Currently, I am facing a challenge in my project where I need to fetch data from an open-source API. The issue lies in the fact that the API provides objects that must be grouped into an array named ingredients. These objects are labeled as strIngredients1 ...

How to access the isolated scope in a directive's link function with AngularJS

Attempting to work with AngularJS custom directives for the first time. Struggling to grasp the isolated scope within the link function of the directive. Snippet from my app : view.html ... <raw-data id="request-data" title="XML of the request" data ...

What is the method for selectively applying a "fade to black" mask to an input field?

For my current project, I need to incorporate a design feature where a "fade to black" mask gradually appears on the left side of an input field once the text content reaches the maximum visible width of the input box. The image below provides a visual re ...

Angular is patiently waiting for the Ajax service function to finish executing

Seeking help on retrieving the result of an $http request from my controller. Below is my service code : .service('postService', function($http, apiUrl) { return { post: function(uri, params) { $http.post(apiUrl + uri, ...

Tips for utilizing the GROUP BY Clause in Sequelize along with associations

How can I properly utilize the GROUP BY clause in Sequelize to combine data from two tables? This is the SQL query I am attempting to translate into Sequelize: SELECT products.product_name, SUM(order_list.quantity) FROM products JOIN order_list ON prod ...