How to stop Gulp from watching for changes when used with maven build in AEM?

[avinasht6348431]

Hi Team,

I am using gulp with frontend-maven-plugin. All my tasks defined in gulp are working fine. There is just one BIG issue. After gulp task executes the cmd waits in an infinite loop.

Below is the gulpfile.js:

var gulp = require('gulp');

var concat = require('gulp-concat');

var minifyCSS = require('gulp-minify-css');

var autoprefixer = require('gulp-autoprefixer');

var cleanCSS = require('gulp-clean-css');

var gulp = require('gulp'),

    uglify = require('gulp-uglify');

var pump = require('pump');

var paths = {

    scripts: "src/main/content/jcr_root/etc/designs/usity/clientlib-all/js/*.js",

    styles: "src/main/content/jcr_root/etc/designs/usity/clientlib-all/css/*.css"

}

gulp.task("merge-minify-js", function(){

      gulp.src(paths.scripts)

     .pipe(concat("all.js"))

     .pipe(uglify())

     .pipe(gulp.dest("src/main/content/jcr_root/etc/designs/usity/clientlib-all-min-js"));

});

gulp.task("merge-minify-css", function(){

      gulp.src(paths.styles)

     .pipe(concat("all.css"))

     .pipe(cleanCSS())

     .pipe(gulp.dest("src/main/content/jcr_root/etc/designs/usity/clientlib-all-min-css"));

});

// watch tasks for automation

gulp.task('watch', function() {

  gulp.watch(paths.scripts, ['merge-minify-js']);

  gulp.watch(paths.styles, ['merge-minify-css']);

});

gulp.task("default", ["watch","merge-minify-js", "merge-minify-css"]);

pom.xml i have added maven plugin:

<!--gulp-->

<plugin>

        <groupId>com.github.eirslett</groupId>

        <artifactId>frontend-maven-plugin</artifactId>

        <version>1.4</version>

             <!--<groupId>org.codehaus.mojo</groupId>

    <artifactId>exec-maven-plugin</artifactId>

    <version>1.5.0</version>  -->

        <executions>

           <execution>

                <id>install node and npm</id>

                <goals>

                    <goal>install-node-and-npm</goal>

                </goals>

                <configuration>

                    <nodeVersion>v10.15.1</nodeVersion>

                    <npmVersion>6.4.1</npmVersion>

                </configuration>

            </execution>

           <execution>

<id>npm run gulp</id>

<goals>

<goal>npm</goal>

</goals>

<configuration>

<arguments>run gulp</arguments>    

</configuration>

<phase>generate-resources</phase>

</execution>

            <execution>

                <id>bower install</id>

                <goals>

                     <goal>bower</goal>

                </goals>

                     <configuration>

                        <arguments>install</arguments>

                     </configuration>

                </execution>

                <execution>

                     <id>gulp build</id>

                     <goals>

                         <goal>gulp</goal>

                     </goals>

                     <phase>generate-resources</phase>

                </execution> 

        </executions>

    </plugin>

Kindly let me know the resolution for the same to make build successful.

Thanks in advance.

[smacdonald2008]

WHy are you not using the Maven Archetype as discussed here:

Getting Started with AEM Sites Chapter 1 - Project Setup

This is what Adobe recommends. 

[Gaurav-Behl · Accepted solution]

change

gulp.task("default", ["watch","merge-minify-js", "merge-minify-css"]);

to

gulp.task("default", ["merge-minify-js", "merge-minify-css"]);

[avinasht6348431]

Thanks Gaurav.It worked for me.

But is it possible to "watch" the tasks for js and css file(add/delete) and parallelly make the maven build also success?!

[Gaurav-Behl]

Not in the same thread/terminal/cmd but you can create another task like -   gulp.task("<mytask>", ["watch","merge-minify-js", "merge-minify-css"]);

and when you want to watch use "gulp <mytask>" in terminal otherwise for normal maven build when you wouldn't want build to keep waiting, use "default" (gulp would run "default"  task if you don't specify one in goal)

[avinasht6348431]

Thanks Gaurav!