asp net core npm包管理

  • 新建package.json
{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {},
  "dependencies": {
    "bootstrap": "4.6.0",
    "jquery": "3.5.1",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-less": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "merge-stream": "^1.0.1"
  }
}
  • 新建bundleconfig.json
[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/lib/*.css"
      
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/lib/*.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]
  • 新建gulpfile.js
'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    merge = require('merge-stream'),
    less = require('gulp-less'),
    del = require('del'),
    bundleconfig = require('./bundleconfig.json');

var paths = {
    webroot: "./wwwroot/"
};
paths.node_modules_css_libs = [
    
    'node_modules/bootstrap/dist/css/bootstrap.css',
]
paths.node_modules_js_libs = [
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
  
]
paths.lib = paths.webroot + 'lib/*.js';
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.concatJsDest = paths.webroot + "js/site.min.js";

const regex = {
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/
};
gulp.task('compile-less', function () {
    return gulp.src('wwwroot/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('wwwroot/css/'));
}); 
/* Task to clear previous css */
gulp.task('del', function (cb) {
    return del(['wwwroot/css/dist/*.min.css'], cb);
});
/* Task to minify css */
gulp.task('min:css', function () {
    return gulp.src('wwwroot/css/*.css')
        .pipe(cssmin())
        // The gulp-uglify plugin won't update the filename
        // .pipe(uglify())
        // So use gulp-rename to change the extension
        .pipe(rename({ extname: '.min.css' }))
        .pipe(dest('wwwroot/css/dist/'));
});
gulp.task('min:js', async function () {
    merge(getBundles(regex.js).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:css', async function () {
    merge(getBundles(regex.css).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:html', async function () {
    merge(getBundles(regex.html).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min', gulp.series(['min:js', 'min:css', 'min:html']));

gulp.task('clean', () => {
    return del(bundleconfig.map(bundle => bundle.outputFileName));
});

gulp.task('watch', () => {
    getBundles(regex.js).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:js"])));

    getBundles(regex.css).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:css"])));

    getBundles(regex.html).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(['min:html'])));
});

gulp.task('lib',async () =>{     //复制npm包到web root中
    gulp.src(paths.node_modules_css_libs).pipe(gulp.dest(paths.webroot + 'lib/css'));
    gulp.src(paths.node_modules_js_libs).pipe(gulp.dest(paths.webroot + 'lib/js'));

});
const getBundles = (regexPattern) => {
    return bundleconfig.filter(bundle => {
        return regexPattern.test(bundle.outputFileName);
    });
};


/* Task when running `gulp` from terminal */
gulp.task('default', gulp.series('del', 'compile-less', 'min'));
  • 安装nuget包
    BuildBundlerMinifier
    项目文件添加
<Target Name="MyPreCompileTarget" BeforeTargets="Build">
 <Exec Command="gulp min" />
</Target>

参考:微软官方

posted @ 2021-02-08 16:32  讠讠讠  阅读(33)  评论(0)    收藏  举报