NPM/GULP 安装

需要下载Node.js，自带npm。
然后全局gulp

npm i -g gulp
npm i -g gulp-cli

注意如果修改过npm包的路径

npm config get prefix

则需要把这个prefix添加到系统的PATH中

初始化NPM项目

在项目根目录执行

npm init

根据提示创建npm项目文件

然后编辑生成的package.json，修改devDependencies节点的内容如下（如果没有则在跟对象创建该节点）。

"devDependencies": {
    "del": "^5.0.0",
    "gulp": "^4.0.2",
    "gulp-cssmin": "^0.2.0",
    "gulp-less": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2"
  }

这些事gulp打包时需要使用的一些plugin

编辑gulp脚本

这里我做了两件事

• 编译less文件生成css
• 压缩用到的css文件为*.min.css

gulpfile.js内容如下

const { src, dest } = require('gulp');
const gulp = require('gulp');
const less = require('gulp-less'); 
const del = require('del');
const cssmin = require('gulp-cssmin');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const { series } = require('gulp');

/* Task to compile less */
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/'));
});

/* Task when running `gulp` from terminal */
gulp.task('default', series('del', 'compile-less', 'min:css'));

最终内容生成在wwwroot/css/dist目录。

注意gulp 4.x版本，串联task需要通过series/paralell来串联，而不能直接写一个列表了。

将gulp打包命令添加到项目编译

参考微软官方的这篇文章。在项目的csproj文件中增加：

  <Target Name="MyPreCompileTarget" BeforeTargets="Build">
    <Exec Command="gulp default" />
  </Target>

这样编译时就会触发default任务。