gulp处理LESS,以及js压缩


gulp处理LESS,以及js压缩

利用Gulp处理:

  • LESS转CSS
  • JS文件压缩
  • 监听文件变化,如果文件发生变化,自动处理以上命令

package.json

JavaScript 全选
{
  "name": "YESCMSs",
  "version": "1.0.0",
  "description": "An ASP.NET Core application for getting started with Less",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "private": true,
  "keywords": [
    "aspnetcore",
    "less"
  ],
  "author": "anuraj",
  "license": "MIT",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-clean-css": "3.9.0",
    "gulp-less": "3.3.2",
    "gulp-utf8-convert": "^0.0.7",
    "gulp-watch": "^5.0.1"
  }
}

 

JavaScript 全选
var gulp = require("gulp"),
    watch = require('gulp-watch'),
    cleanCss = require("gulp-clean-css"),
    less = require("gulp-less"),
    utf8Convert = require('gulp-utf8-convert'),
    // 获取 uglify 模块(用于压缩 JS)
    uglify = require('gulp-uglify');


gulp.task("less", function () {
    return gulp.src('wwwroot/less/*.less')
        .pipe(less())
        .pipe(utf8Convert())
        .pipe(cleanCss({ compatibility: 'ie8' }))
        .pipe(gulp.dest('wwwroot/css'));
});
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function () {
    // 1\. 找到文件
    gulp.src('wwwroot/js-source/*.js')
        // 2\. 压缩文件
        .pipe(uglify())
        // 3\. 另存压缩后的文件
        .pipe(gulp.dest('wwwroot/js'))
})

// 文件发生变化的时候,自动处理
gulp.task('watch:less', function () {
    return watch('wwwroot/less/*.less', function () {
        gulp.start('less');	//执行html任务
/*        browserSync.reload(); //刷新浏览器*/
    });
});
gulp.task('watch:script', function () {
    return watch('wwwroot/js-source/*.js', function () {
        gulp.start('script');	//执行html任务
        /*        browserSync.reload(); //刷新浏览器*/
    });
});
gulp.task("watch", function () {
    gulp.start('watch:less', 'watch:script')
});


//parallel()将任务功能和/或组合操作组合成同时执行的较大操作。
gulp.task("default", function () {
    gulp.start('less', 'script')
});
版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
管理员
上一篇:bat批处理中执行gulp界面一闪而过,执行完后cmd窗口就会关闭的解决办法
下一篇:HTML IMG 图片链接404错误,引起alt超长影响界面美观
评论列表

发表评论

评论内容
昵称:
关联文章

gulp处理LESS以及js压缩
bat批处理中执行gulp界面一闪而过,执行完后cmd窗口就会关闭的解决办法
Visual Studio (VS) 使用Gulp报错 ReferenceError: primordials is not defined
VUE Cli3项目添加LESS支持
路由跳转以及参数处理
three.js
ASP.NET Core 使用 LESS
less里面calc() 语法使用
CSS RGB函数 LESS问题
C#图片处理
TinyMCE 代码高亮 Prism.js 对 C# language-csharp 没做处理
C#使用SharpZipLib进行压缩文件(*.rar,*.zip)操作,压缩和解压
使用.NET 6开发TodoList应用(10)——实现DELETE请求以及HTTP请求幂等性
Node.js历史下载
Electron edge.js配置
js Copy剪切板
协议处理类的实现
C#图片处理类:ImageLibrary
html+js上传文件
EF并发处理,防止并发修改数据

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码