Angular File Sorting Error in Gulp detected

After including .pipe(angularFilesort()) in my gulp script, the task runs wiredep but never proceeds to the default task. It just stops after executing wiredep. However, if I remove .pipe(angularFilesort()), the script works perfectly fine. Can someone help me identify what the issue might be?

var gulp = require('gulp');
var browserSync = require('browser-sync');
var config = require('./gulp.config')();
var $ = require('gulp-load-plugins')({lazy: true});
var angularFilesort = require('gulp-angular-filesort');

function startBrowserSync() {
    if (browserSync.active) {
        console.log("already running");
        return;
}
    var options = {
        server: {
            baseDir: './'
        },
        files: [config.js]
    }
    browserSync.init(options);
}

gulp.task('default', ['wiredep'], function () {
    startBrowserSync();
    gulp.watch(config.js, browserSync.reload);
    gulp.watch(config.html, browserSync.reload);
});

gulp.task('wiredep', function () {
    var options = config.getWiredepDefaultOptions();
    var wiredep = require('wiredep').stream;

    return gulp
        .src(config.index)
        .pipe(wiredep(options))
        .pipe($.inject(
            gulp.src(['./src/**/*.js']).pipe(angularFilesort())
        ))
        .pipe(gulp.dest('./'));
});

Answer №1

Hey Nick, the code seems fine to me. Since you are utilizing gulp-load-plugins, there's no need to explicitly require gulp-inject which might make it difficult to verify if inject is properly set up.

You mentioned that the functionality works even without angularFilesort().

In a similar fashion, utilize gulp-load-plugins to import gulp-angular-filesort. The plugin automatically converts the second dash and any subsequent dashes into camel case.

You can test it out by using: pipe($.angularFilesort())

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

Tips for synchronizing text field and formula field content on MathQuill 0.10

I am currently working on creating a WYSIWYGish input element for my formula, along with a LaTeX input element. <span id="editable-math" class="mathquill-editable"></span> The goal is to make these two elements work synchronously. Here's ...

Acquire user input using AngularJS

Is it possible to retrieve the value of an input text using AngularJS without utilizing a Controller? If so, what approach would achieve this? I have come across some resources discussing similar queries, but they all involve .controller here is one such ...

Showing a loading animation inside an HTML element

I have a main webpage that contains several buttons. Each button, when clicked, loads a specific target page as an object within a div on the main page. The "target" refers to the page that will be displayed within the object. <script> .... chec ...

What is the process for switching directories and renaming a file when uploading in nodeJs?

I am currently using multer and fs to handle the upload of an image file. How can I modify the directory where uploaded files are stored? Currently, all files are saved in my "routes" folder instead of the "uploads" folder created by multer. Additionally, ...

Using multiple GET methods on a single route in Express and Sequelize can lead to conflicts

I've created a simple product CRUD application with routes to search for products by ID and by name. However, when I send a request to http://localhost:4000/products?name=pen, the routes conflict with each other and I'm unable to retrieve the pro ...

A guide on wrapping a resource that relies on an asynchronous call

I am facing a challenge with a service that wraps a resource. I recently updated it to include a parameter (websiteId) fetched from an asynchronous call. Initially, I attempted to simply nest the resource within another resource, but encountered a typical ...

Ways to reach state / methods outside of a React component

Implementing the strategy design pattern to dynamically change how mouse events are handled in a react component is my current task. Here's what my component looks like: class PathfindingVisualizer extends React.Component { constructor(props) { ...

Using Backbone.js to Persist Information on the Server

Currently, I'm in the process of integrating my Backbone.js application with the server. One thing to mention is that I have customized my sync function in the collection to utilize jsonp: window.Project = Backbone.Model.extend({ initialize:func ...

Divinely favored - pay attention for each and every sound

Currently, I am utilizing node with the blessed tty library downloaded from NPM. Within this library, there is a method called "key" that I am using in the following way: blessed.key(['q', 'z'], function(ch, key) { //do something ...

Angular - Automatically update array list once a new object is added

Currently, I'm exploring ways to automatically update the ngFor list when a new object is added to the array. Here's what I have so far: component.html export class HomePage implements OnInit { collections: Collection[]; public show = t ...

Challenge with Sequelize Many-to-Many Query

Currently, I am facing an issue with connecting to an existing MySQL database using Sequelize in Node. The database consists of a products table, a categories table, and a categories_products table. My goal is to fetch products, where each product includes ...

Tips for incorporating variables (datatable) into SQL command text for execution

I am new to Vertica and currently exploring its integration with Angular on an ASPX page. `con.Open(); cmd = con.CreateCommand(); cmd.Connection = con; cmd.Parameters.Add(new VerticaParameter("@tblCustomers", ...

Creating synchronous behavior using promises in Javascript

Currently, I am working with Ionic2/Typescript and facing an issue regarding synchronization of two Promises. I need both Promises to complete before proceeding further in a synchronous manner. To achieve this, I have placed the calls to these functions in ...

Tips for successfully sending an array of arrays with jQuery ajax

I have an array in PHP that looks like this: $treearr = array( array("root","search","Search",false,"xpLens.gif"), array("root","hometab","Home Tab",false,"home.gif"), array("root","stafftab","Staff Tab",false,"person.gif"), array ("stafftab","new ...

The WPF WebBrowser struggles to display the generated HTML from a website built with Angular JS

I'm currently developing a WPF application and I need to extract the HTML content of a website that utilizes Angular JS technology. Here is my current approach: First, I have created a WPF Web Browser control: private WebBrowser webBrowser; Next, I ...

generate dynamic custom headers in an express application for accessibility by an Angular application

https://i.stack.imgur.com/6jyNE.pngRecently, I have started using Express and despite my extensive research, I haven't been able to find a solution to my issue. The problem is that I am receiving headers in my Express app, but when I attempt to make t ...

angular click triggers the following content

How can I make the following content appear when clicked? I have a list of content that displays up to 20 items, but I want to show the rest when clicked. I have created the nextMovieList method for this purpose. import { Component, OnInit } from ' ...

Is it possible to incorporate Vue and Vuetify into an existing project that requires IE compatibility?

Currently in the process of enhancing a legacy project with new functionality. The front end is currently relying solely on jQuery for all the webpages. I have been tasked with adding another webpage and would like to incorporate Vuetify + Vue due to the i ...

the ultimate guide to leveraging a single slot to edit various columns within data tables

Utilizing vuetify, I have successfully created a reusable data table. The headers and items are passed as props to allow for the data table to be used in various components. While employing slots, I have taken a unique approach by implementing a column-ba ...

Best practice for structuring an object with multiple lengthy string elements in the GCP Datastore Node Library

My JavaScript object is structured like this: const data = { title: "short string", descriptions: [ "Really long string...", "Really long string..." ] } I need to exclude the long strings from the indexes, but I ...