TypeScript编译安装 npm install -g typescript npm install gulp-typescript -D// gulpfile.js var ts = require('gulp-typescript'); gulp.task('watch', function () { //sass监听 gulp.watch('src/css/sass/*.scss', function () { return gulp .src('src/css/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); //less监听 gulp.watch('src/css/less/*.less', function () { return gulp .src('src/css/less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css/')); }); // Typescript gulp.watch('src/js/ts/*.ts', function () { return gulp.src('src/js/ts/*.ts').pipe(ts()).pipe(gulp.dest('dist/js/')); }); });

Less扩展语言编译安装 Less转CSS{callout color="#4defb9"}首先可以引入使用less.js将less解释为css样式。也可以使用命令行转换的方式进行.less文件向.css文件的转换，可以使用gulp构建工具中的gulp-less进行自动转换{/callout}{alert type="info"}const gulp = require('gulp'); var less = require('gulp-less'); //less var sass = require('gulp-sass')(require('sass')); //sass var scss = require('gulp-scss'); //scss var ts = require('gulp-typescript'); //文件监听 gulp.task('watch', function () { //sass监听 gulp.watch('src/css/sass/*.scss', function () { return gulp .src('src/css/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); //less监听 gulp.watch('src/css/less/*.less', function () { return gulp .src('src/css/less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css/')); }); });{/alert}语法实践变量{alert type="success"}@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }{/alert}

前端模块基本插件包 NodeJS{alert type="success"}删除文件npm install del -D npm install clean -D复制文件npm install --save copy压缩文件npm install --save copy反向代理、跨域npm i http-proxy-middleware{/alert}Gulp{alert type="info"}删除文件npm install --save-dev gulp-clean复制文件npm i gulp-copy -D压缩文件npm i uglify -D合并文件npm i gulp-concat -D压缩CSSnpm install gulp-cssnano --save-dev npm install --save-dev gulp-cssmin压缩图片$ npm install --save-dev gulp-imageminHTML文件压缩npm install --save gulp-htmlminSCSS转CSS{callout color="#f0ad4e"}.scss文件或者.sass文件不能以下划线为文件名开头，否则会出错{/callout}npm install --save sass gulp-sass npm install --save gulp-scss{/alert}Grunt{alert type="success"}删除文件npm install grunt-contrib-clean --save-dev复制文件npm i grunt-contrib-copy -D压缩文件npm i grunt-contrib-uglify -D合并文件npm i grunt-contrib-concat -D压缩CSSnpm i grunt-contrib-cssmin -D压缩图片npm install --save-dev grunt-contrib-imageminHTML文件压缩npm install grunt-contrib-htmlmin --save-dev{/alert}