Implementazione di un semplice pacchetto gulp con nodejs

Di recente ho cambiato azienda, è una startup e il progetto è stato costruito praticamente da zero. Dopo aver lavorato per diversi anni, non avevo mai pensato di scrivere qualcosa di tecnico, oggi improvvisamente sono venuto in mente, oh certo, sono sempre particolarmente incline a venire in mente cose improvvisamente, non so cosa fare, non farei volgarmente, non dico altro, dopo tutto, lavoro, divagare non è molto buono. Dopo un mese di lavoro, il progetto ha iniziato a prendere forma, e può essere lanciato in versione 1.0, approfittando del tempo che aspetta i testi, scrivo qualcosa di semplice su gulp, domani avrò tempo per un articolo più dettagliato, e poi magari qualcosa su webpack, oh, non so quando avrò tempo, non mi biasimare, sembra di aver detto troppe sciocchezze. Stop, stop.

Partiamo da zero, prima di tutto crea un file package.json, npm init e conferma, conferma, conferma, tutto ciò che serve durante la costruzione lo aggiungi con npm. Chi ha fatto un'architettura di base di vue dovrebbe sapere che l'architettura genererà automaticamente un file package.json molto completo, naturalmente noi non ne abbiamo bisogno così tanti. Non c'è bisogno di dire altro.

Per eventuali funzionalità potenti da aggiungere in futuro, facciamo più file, non è solo un gulpfile.js, ovviamente ne va bene uno. Non c'è bisogno di fare altro.

Creiamo un gulpfile.config.js per posizionare specificamente le referenze dei percorsi di file di output. È quello che si chiama src, dist. Poi un gulpfile.xxx.js, il nome è a tua scelta, basta che lo riferisci correttamente. Infine, un gulpfile.js, infine dobbiamo eseguirlo.

Facciamo un esempio molto semplice, prendiamo ad esempio la compressione dei file js, più tardi aggiungeremo la gestione delle versioni, l'uso è quasi lo stesso, aggiungi quello che serve.

var src_file = './xxxx/'; // La directory dei tuoi file sorgenti
var dist_file= './dist/xxxx/'; // La directory di archiviazione desiderata per i file dopo l'elaborazione
var config= {
src: src_file,
dist: dist_file,
js: {
  src: src_file + 'src/js/**/*.js',      // La directory dei tuoi file js
  dist: dist_file + 'src/js',         // La directory di archiviazione dei file js dopo il pacchettamento
  },
};
module.exports = config;

Questo è solo un piccolo esempio molto semplice, se ci sono altri file da aggiungere, va bene, html, css, img e altri file statici.

Il momento chiave è arrivato, mettiamo i metodi di elaborazione all'interno di gulpfile.xxx.js.

gulpfile.xxx.js：

var gulp = require('gulp');
var rename = require('gulp-rename'); //重命名
var babel = require("gulp-babel");
var uglify = require('gulp-uglify'); //js压缩
var config = require('./gulpfile.config.js');
var runSequence = require('run-sequence');
var rev = require('gulp-rev');//版本号管理的一些东西，先写进来吧，懒的在敲了
var revCollector = require('gulp-rev-collector');
var cssUrl = './dist/xxx/src/css/*.css',
   jsUrl = './dist/xxx/src/js/*.js';
function haha() {
  gulp.task('js', function () {
    return gulp.src(Config.js.src);
          .pipe(babel())
          .pipe(uglify())
          .pipe(gulp.dest(config.js.dist));
    });
  gulp.task('revJs', function(){
    return gulp.src(jsUrl);
          .pipe(rev())
          .pipe(rev.manifest())
          .pipe(gulp.dest('dist/xxx/src/js'));
  });
  gulp.task('revHtml', function () {
        return gulp.src(['dist/xxx/src/js/**/*.json', 'chaohuo/*.html']) /*后面本地html文件的路径，可自行配置*/
          .pipe(revCollector(
            { replaceReved:true }
            ))
          .pipe(gulp.dest('dist/chaohuo')); /*Html更换css、js文件版本,和本地html文件的路径一致*/
  });
  gulp.task('dev', function (done) {
      condition = false;
      runSequence(
          ['revJs'],
          ['revHtml'],
    done);});
    gulp.task('default', ['js','dev']);
}
module.exports = haha;

Oh, volevo spiegare passo passo, ma ho messo dentro anche i numeri di versione, va bene così, iniziamo insieme.

Di seguito è riportato il file gulpfile.js：

var haha= require('./gulpfile.prod.js');
haha();

Il lavoro di base è già stato completato per la maggior parte, c'è ancora qualcosa da dire. Se usi sintassi es6, non dimenticare di configurare un file .babelrc.

.babelrc contenuto：

  "presets": [
    "es2015",
  ],
  "plugins": [
    "transform-remove-strict-mode"//questo plugin è la chiave per aggiungere numeri di versione.
  ]
}

alcuni amici potrebbero incontrare problemi con numeri di versione che si sommano continuamente, ricordi { replaceReved:true }? Guardalo prima, ricorda di aggiungere questo. E poi, nell'ultimo passo node_modules dobbiamo cambiare alcuni codici, veniamo pure, ho scaricato l'ultimo pacchetto (se usi uno vecchio, è più o meno la stessa modifica), sostituiscilo.

gulp-path里的index.js两个return的东西都改掉：

return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);改为return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + ext);改为return modifyFilename(pth, (filename, ext) => filename + ext);

gulp-rev-collector里的index.js：

circa 128 righe　

patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) )
+ path.basename(key, path.extname(key))
.split('.')
.map(function(part){
return escPathPattern(part) + '(' + opts.revSuffix + ')?';
});
.join('\\.')
+ patternExt
);

Questo viene modificato in:

patterns.push(escPathPattern((path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key))) + path.basename(key, path.extname(key))) + opts.revSuffix + escPathPattern(path.extname(key)) + "(\\?v=(\\d|[a-z]){8,10})*");

Qui ho cercato molti materiali correlati su Internet, ma sembrano essere tutte vecchie versioni, e i file all'interno di gulp-rev non devono essere modificati, qui è stato testato più volte, il che è基本上可用.

Bene, non ci resta molto per il successo, esegui il comando gulp nel cmd, ok, è quasi fatto, puoi guardare.

Attenzione: ricorda di installare npm per tutto ciò che richiede require, se incontri problemi usa cnpm, non dico altro.

Inoltre, poiché molte cose sono state digitate a mano, potrebbero esserci alcune errori di battitura o errori nel percorso dei file, ricorda di controllare e modificare.

Avrei voluto scrivere in dettaglio, ma oggi è così, mi sono persa qui, la signorina deve andare a lavorare. Se hai problemi, puoi scrivermi, tornerò quando avrò tempo. È un po' caotico, non ti preoccupare.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.