En el post anterior, vimos como extender la ToolChain del SPFx para crear nuevas tareas de Gulp, usando el propio sistema de build del SPFx. El siguiente paso que podría ser interesante, sería añadir dependencias a las nuevas Tasks, por ejemplo, en este post del gran Elio Struyf, tenemos una task para provisionar los assets JS del webpart a un CDN de SharePoint Online. No estaría bien que esa task, tuviera una dependencia en la task del sfpx que hace el bundle del webpart (gulp bundle –ship)? De este modo, al ejecutar gulp upload-to-sharepoint, previamente se haría el bundle, y no habría que lanzarlo a mano.

Pues bien, desafortunadamente, no hay una buena solución para hacer algo así. He tenido la suerte de contar con la ayuda de 3 genios del spfx, como son el propio Elio StruyfWaldek Mastykarz y  Stefan Bauer, y hemos llegado a la conclusión de que no es viable lo que queremos, siguiendo el propio sistema de build. Sin embargo, os voy a dar un posible workaround que cubre ciertos escenarios, aunque no termina de encajar dentro del sistema propio de Build del SPFx.

El sistema que te ofrece SPFx para añadir tareas al sistema de Build, lo que hace es que tu task personalizada, se ejecute en cada Build, bien al inicio, o al final. Tenéis el detalle en la propia documentación del SPFx:

Sin embargo, no es esto lo que queremos, ya que no queremos que el upload-to-sharepoint se ejecute en cada build, queremos lo contrario, que con el upload-to-sharepoint, primero se ejecute el Bundle. La única alternativa es la siguiente:

Primero, tenemos que definir nuestra task siguiendo el formato habitual de Gulp. Algo como:

Luego, haremos uso de la lista de Tasks del objeto Gulp. Ojo! que en esta lista de tasks, no encontrarás las tasks definidas por el SPFx, sólo las tasks que has creado tú con gulp.task. De la lista de tasks, cogemos nuestra task Hello, y le añadimos una dependencia a la task “bundle” (curiosamente, la dependencia a una task propia del SPFx si que la va a reconocer):

Si ahora sacamos el árbol de tares con “gulp –tasks“, veremos que Hello tiene una dependencia en Bundle:

Ahora, ya podemos ejecutar nuestra task Hello, y vemos como primero se ejecuta el Bundle del spfx (la imagen no recoge toda la ejecución del Bundle, pero es suficiente para ver que hace primero el bundle y luego nuestra task Hello):

Nada más, de momento parece que es la única alternativa que tenemos para ejecutar tareas custom de Gulp con dependencias en tareas del propio SPFx. Supongo/Espero que tengamos mejores soluciones en las próximas versiones del SPFx.

Espero que os sirva!

@luismanez