\n```\n\nA sto giro useremo un plugin gulp chiamato gulp-useref che concatena i file CSS e JS in uno solo (un file CSS e un file JS) leggendo i commenti che iniziano con . La sintassi è:\n\n```html\n<-- build:\n \n --> .............................( Html markup code for scripts )\n \n```\n\n- può essere js o css. Obbligatorio affinché si possa creare il file corretto.\n- si riferisce al percorso finale.\n\nInstalliamo il plugin con la solita sintassi\n\n```batch\nnpm install gulp-useref --save-dev\n```\n\ne creiamo la task\n\n```js\nconst useref = require(\"gulp-useref\");\ngulp.task(\"useref\", function () {\n return gulp.src(\"src/*.html\").pipe(useref()).pipe(gulp.dest(\"dist\"));\n});\n```\n\nEseguendo la task useref, Gulp leggerà i due script e li concatena in uno unico nella cartella dist/js/main.min.js\n\n\n\nRisultato della task useref\n\nPer minificare JavaScript avremo bisogno di gulp-uglify e gulp-if\n\nInstalliamo i due pluggin con un comando unico\n\n```batch\nnpm install gulp-uglify gulp-if --save-dev\n```\n\nModifichiamo la task useref che minifica i file JavaScript.\n\n```js\nconst uglify = require(\"gulp-uglify\");\nconst gulpif = require(\"gulp-if\");\ngulp.task(\"asset-opt\", function () {\n return gulp\n .src(\"src/*.html\")\n .pipe(useref())\n .pipe(gulpif(\"*.js\", uglify()))\n .pipe(gulp.dest(\"dist\"));\n});\n```\n\nPer minificare il CSS invece dobbiamo inanzitutto richiamare il file nella head del documento index.html presente nella directory src\n\n```html\n\n\n\n```\n\nInstalla gulp-csso con il solito comando\n\n```batch\nnpm install gulp-csso --save-dev\n```\n\nModifichiamo la task asset-opt come segue:\n\n```js\ngulp.task(\"asset-opt\", function () {\n return gulp\n .src(\"src/*.html\")\n .pipe(useref())\n .pipe(gulpif(\"*.js\", uglify()))\n .pipe(gulpif(\"*.css\", csso()))\n .pipe(gulp.dest(\"dist\"));\n});\n```\n\nOra se il file sottoposto a scansione è un CSS verrà eseguita la funzione csso che lo minimizzerà. Testa la task eseguendo `gulp asset-opt` da linea di comando e vedrai che nella cartella dist verrà creato una nuova directory css con dentro il file main.min.css.\n\n## Copiare i file nella cartella Dist\n\nSupponiamo di creare una cartella font dentro a src, la quale conterrà i font usati nel progetto.\n\nCreiamo una task gulp che copia i file da src a dist\n\n```js\ngulp.task(\"fonts\", function () {\n return gulp.src(\"src/fonts/**/*\").pipe(gulp.dest(\"dist\"));\n});\n```\n\n## Combinare più Gulp task\n\nIn precedenza abbiamo usato un metodo di Gulp chiamato series, di cui non ho spiegato nulla. Quel metodo permette di combinare più task simultaneamente.\n\nSolitamente è utile creare una task per la produzione, la quale ottimizza tutti i file e li copia da src a dist.\n\nSolitamente la chiamo build e non farò eccezione stavolta. La task eseguirà l'ottimizzazione dei CSS e dei JS e sposterà i font.\n\n```js\ngulp.task(\"build\", gulp.series(\"asset-opt\", \"fonts\"));\n```\n\nL'altra task è invece, quella per lo svilippo, l'abbiamo già creata. Si occuperà di compilare i file scss in css, controllare se ci sono cambiamenti e refresherà il browser di volta in volta usando browser-sync.\n\nLa task è quella che abbiamo chiamato `live-server`, ma la puoi rinominare `default`\n\n```js\ngulp.task(\"default\", gulp.series(\"serve\", \"watch\"));\n```\n\nPerfetto, abbiamo finito! Di seguito ti riporto i vari file creati manualmente\n\n```js\nconst gulp = require(\"gulp\");\nconst sass = require(\"gulp-sass\");\nconst autoprefixer = require(\"gulp-autoprefixer\");\nconst browserSync = require(\"browser-sync\").create();\nconst useref = require(\"gulp-useref\");\nconst uglify = require(\"gulp-uglify\");\nconst gulpif = require(\"gulp-if\");\nconst csso = require(\"gulp-csso\");\n\n// gulp.task('hello', function(done) {\n// \tconsole.log('Hello from Gulp');\n// \tdone();\n// });\n\ngulp.task(\"sass\", function () {\n return gulp\n .src(\"src/scss/*.scss\")\n .pipe(sass())\n .pipe(autoprefixer())\n .pipe(\n browserSync.reload({\n stream: true,\n })\n )\n .pipe(gulp.dest(\"src/css\"));\n});\n\ngulp.task(\"asset-opt\", function () {\n return gulp\n .src(\"src/*.html\")\n .pipe(useref())\n .pipe(gulpif(\"*.js\", uglify()))\n .pipe(gulpif(\"*.css\", csso()))\n .pipe(gulp.dest(\"dist\"));\n});\n\ngulp.task(\"fonts\", function () {\n return gulp.src(\"src/fonts/**/*\").pipe(gulp.dest(\"dist/fonts\"));\n});\n\ngulp.task(\"watch\", function () {\n gulp.watch(\"src/scss/**/*.scss\", gulp.series(\"sass\", \"reload\"));\n});\n\ngulp.task(\"serve\", function () {\n browserSync.init({\n server: \"src\",\n port: 4000,\n });\n});\n\ngulp.task(\"reload\", function (done) {\n browserSync.reload();\n done();\n});\n\ngulp.task(\"build\", gulp.series(\"asset-opt\", \"fonts\"));\n\ngulp.task(\"default\", gulp.series(\"serve\", \"watch\"));\n```\n\n```html\n\n\n \n \n \n \n Document\n \n \n \n \n