分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

gulpfile.js配置 实现ctrl+s自动编译和刷新浏览器

发布时间:2023-09-06 01:26责任编辑:蔡小小关键词:js配置浏览器编译

var gulp = require("gulp"); //引进gulp模块
var uglify = require("gulp-uglify"); //js压缩
var minifyCss = require("gulp-minify-css"); //css压缩
var minifyHtml = require(‘gulp-minify-html‘); //html压缩
var imagemin = require(‘gulp-imagemin‘); //图片压缩
var sass = require(‘gulp-sass-china‘); //sass编译
var livereload = require(‘gulp-livereload‘); //刷新


//js压缩
gulp.task(‘minijs‘, function() {
???gulp.src(‘src/js/*.js‘) //要压缩的js文件
???????.pipe(uglify()) //用uglify压缩
???????//.pipe(rename(‘yasuo.min.js‘)) //js重命名
???????.pipe(gulp.dest(‘dist/js‘)); //压缩后路径
})

//css压缩
gulp.task(‘minicss‘, function() {
???gulp.src(‘src/css/*.css‘) //要压缩的css文件
???????.pipe(minifyCss()) //压缩css
???????.pipe(gulp.dest(‘dist/css‘)); //压缩后的路径
})

//html压缩
gulp.task(‘minihtml‘, function() {
???gulp.src(‘src/*.html‘) //要压缩的html文件
???????.pipe(minifyHtml()) //压缩
???????.pipe(gulp.dest(‘dist‘)); //压缩后的路径
})

//图片压缩
gulp.task(‘miniimg‘, function() {
???gulp.src(‘src/img/*.{jpg,png,gif,ico}‘) //要压缩的图片文件
???????.pipe(imagemin()) //压缩图片
???????.pipe(gulp.dest(‘dist/img‘)) //压缩后保存的路径
})

//sass编译
gulp.task(‘sass‘,function(){
???gulp.src(‘src/sass/*.scss‘)
???????.pipe(sass())
???????.pipe(gulp.dest(‘src/css‘))
???????.pipe(livereload());
})
//监听.scss
gulp.task(‘watch‘,function(){
???livereload.listen();//要在这里调用listen()方法
???gulp.watch(‘src/sass/*.scss‘,[‘sass‘])
})


//用gulp实现编译
gulp.task(‘default‘,[‘sass‘,‘watch‘]);


//gulp compress 实现img/js/css/的压缩
gulp.task(‘compress‘,[‘minijs‘,‘minicss‘,‘miniimg‘]);

gulpfile.js配置 实现ctrl+s自动编译和刷新浏览器

原文地址:https://www.cnblogs.com/jddk/p/8405368.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved