Переход от глотка к нпм - PullRequest
0 голосов
/ 09 мая 2019

Я пытаюсь отойти от gulp и использовать сценарии npm.У нас есть разработчики, которые используют разные версии node / gulp, и зависимость от плагинов и устаревших приложений была нежелательной проблемой.

Я пытаюсь преобразовать наш скрипт gulp в npm, но есть несколько областей, в которых я застрялна.У меня проблемы с преобразованием из gulp-sourcemaps в npm map-stream и преобразованием из gulp-uglify в uglifyjs.

Вот файл gulp, который мы сейчас используем:

/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var pump = require('pump');
var del = require('del');

// set a variable telling us if we're building in release
var isRelease = true;
if (process.env.NODE_ENV && process.env.NODE_ENV !== 'Release') {
    isRelease = false;
}

var config = {
    //Include all js files but exclude any min.js files
    src: ['Scripts/*.js', '!Scripts/*.min.js']
}

//delete the output file(s)
gulp.task('clean', function () {
    //del is an async function and not a gulp plugin (just standard nodejs)
    //It returns a promise, so make sure you return that from this task function
    //  so gulp knows when the delete is complete
    return del(['Scripts/*.min.js', 'Scripts/Maps/*.map']);
});

 // Combine and minify all files from the app folder
// This tasks depends on the clean task which means gulp will ensure that the 
// Clean task is completed before running the scripts task.
gulp.task('scripts', ['clean'], function (cb) {

    pump([
      gulp.src(config.src),
      sourcemaps.init(),
      uglify({ mangle: isRelease }),
      rename({ suffix: '.min' }),
      sourcemaps.write('Maps', { includeContent: false, sourceRoot: './' }),
      gulp.dest('Scripts/')
    ],
    cb
    );
});

//Set a default tasks
gulp.task('default', ['scripts'], function () { });

Здесьмой текущий скрипт npm (все еще есть ошибки):

 /*
This is the main entry point for defiinng npm tasks
*/

const del = require('del');
var map = require('map-stream');
var pump = require('pump');
var vfs = require('vinyl-fs');
var uglifyjs = require('uglify-js');

// set a variable telling us if we're building in release
var isRelease = true;
if (process.env.NODE_ENV && process.env.NODE_ENV !== 'Release') {
    isRelease = false;
}
console.log(process.env.NODE_ENV);

//task to delete output files
(async () => {
    const deletedPaths = await del(['Scripts/*.min.js', 'Scripts/Maps/*.map']);

    console.log('Deleted files and folders:\n', deletedPaths.join('\n'));
})();




var log = function(file, cb) {
    console.log(file.path);
    cb(null, file);
  };

//    vinyl metadata object
//   Include all js files but exclude any min.js files

  pump([
    vfs.src(['Scripts/*.js', '!Scripts/*.min.js']),
    map(log),
    uglifyjs({mangle:isRelease}),
    rename({ suffix: '.min' }),

    (vfs.dest('Scripts/'))

 ])

При отображении должна быть создана папка «Карты» в каталоге «Сценарии».

 Scripts
     --Maps
           --jquery.min.js.map
           --jquery-1.4.1.min.js.map

Любая помощь приветствуется.

Спасибо!

1 Ответ

0 голосов
/ 04 июня 2019
/*
 *   This is the main entry point for defining npm tasks
 *   Author: *****
 *   Date: 06/03/2019
*/

const del = require('del');
var Uglify = require("uglify-js"),
    fs = require('fs'),
    async = require('async'),
    path = require('path'),
   rename = require('rename'),
   parentDir = 'Scripts';

Проверка типа сборки (Release, Production, Debug и т. Д.) Выполняется с использованием узла, поэтому в этой части сценария не было никаких изменений.

// set a variable telling us if we're building in release
var isRelease = true;
if (process.env.NODE_ENV && process.env.NODE_ENV !== 'release') {
   isRelease = false;
}
 console.log(process.env.NODE_ENV);

Какдля модуля npm del я выбрал синхронный метод.Причина в том, что я хотел, чтобы каждый файл обрабатывался отдельно, а не параллельно.В асинхронном методе отсутствовал файл .acingore, и в любом случае не так много файлов, которые нужно удалять

//  Returns an array of deleted paths
const deletedPaths = del.sync(['Scripts/*.min.js', 'Scripts/Maps/*.map', 'Scripts/.acignore']);

console.log('Deleted files and folders:\n', deletedPaths.join('\n'));

Этот блок выполняет всю работу.Эта функция запускает массив функций последовательно, каждая из которых передает свои результаты следующему в массиве.После завершения каждой функции передается обратный вызов.

async.waterfall([
function (cb) {
    fs.readdir(parentDir, cb);
},
function (files, cb) {
    // files is just an array of file names, not full path
    console.log('Files being looped through:\n');
    // run 10 files in parallel
    async.eachLimit(files, 10, function (filename, done) {
        var filePath = path.join(parentDir, filename);

        var sourceFile = filename;

        if (!fs.lstatSync(filePath).isDirectory()) {

            // create a .temp file to be minified
            fs.copyFileSync(filePath, filePath + '.temp', (err) => {
                if (err) throw err;
                // console.log(filePath + ' was copied to ' + filePath + '.temp');
            });
            //  path the .temp file
            var tempfilePath = path.join(parentDir, filename + '.temp');
            //  console.log('tempfilePath: ' + tempfilePath);

            //  check for /Maps directory, if not, create it
            var mapsDir = parentDir + '/Maps';
            try {
                if (!fs.existsSync(mapsDir)) {
                    fs.mkdirSync(mapsDir)
                }
            } catch (err) {
                console.error(err)
            }

            //  rename file to add .min suffix for minified files
            filename = rename(filename, { suffix: '.min' });
            //  console.log('filename after rename\n' + filename + '\n');
            var newfilePath = path.join(parentDir, filename);
            //   console.log('filePath after rename\n' + newfilePath + '\n');

            //  Synchronous rename
            fs.renameSync(tempfilePath, newfilePath);

            //  get contents of sourceFile 
            //  The source file must be interpolated with [] in order
            //  to be mapped correctly, otherwise your map will get the content
            //  of the source file but not have a link back to the source
            try {
                var code = {
                    [sourceFile]: fs.readFileSync(filePath, 'utf-8')
                };
                console.log(code);
            } catch (e) {
                console.log('Error:', e.stack);
            }

            //  minify file 
            // the syntax for uglifyjs minify is minify(code, options)
            // therefore you need the contents of the file in order to minify it
            // and source map it
            var uglyCode = Uglify.minify(code,
                {
                    mangle: isRelease,
                    sourceMap: {
                        includeSources: false,
                        filename: '../' + filename,
                        root: '../',
                        url: 'Maps/' + filename,
                    },
                }

            );

            //  console.log('Source file: ' + sourceFile);

            //  write minified file to directory
            fs.writeFile(newfilePath, uglyCode.code, function (err) {
                if (err) {
                    console.log(err);
                } else {
                    console.log(filename + " has been mangled");
                }
            }
            );

            //  write map file to directory
            fs.writeFile(mapsDir + '/' + filename + '.map', uglyCode.map, function (err) {
                if (err) {
                    console.log(err);
                } else {
                    console.log(filename + '.map' + " has been mapped");
                }
            }
            );
            done();
        }
    }, cb);
}
], function (err) {
err && console.trace(err);

console.log('\nNo more files in path\n');
});

SIDE ПРИМЕЧАНИЕ. Если вы работаете с узлом 10+ и не можете указать путь к npm в файле .csproj, установите узел глобально, и вы неТ нужно установить путь.

Надеюсь, мои комментарии в коде достаточны.Удачи, если вы пытаетесь отойти от gulp и перейти на npm!

...