当前位置：首页 > news >正文

gulp自动化构建工具--压缩css、js、img、编译less、自动刷新一体--学习笔记

news 来源：原创 2024/5/4 6:51:51

1.压缩js命令

npm install gulp-uglify 或者 cnpm install gulp-uglify

2.压缩css命令

npm install gulp-minify-css 或者 cnpm install gulp-minify-css

3.压缩img命令

npm install gulp-imagemin 或者 cnpm install gulp-imagemin

4.编译less文件

命令：npm install gulp-less 或者 cnpm install gulp-less

5、自动刷新

npm install gulp-connect 或者 npm install gulp-connect

6、编写gulpfile.js文件

//获取gulp
var gulp = require('gulp')
    connect = require('gulp-connect');
//获取uglify模块（用于压缩js）
var uglify = require('gulp-uglify')
//获取minify-css模块（用于压缩css）
var minifyCss = require('gulp-minify-css')
//获取gulp-imagemin模块(用于压缩图片)
var imagemin = require('gulp-imagemin')
//获取gulp-less模块
var less = require("gulp-less")

//压缩css文件
//在命令行使用gulp css启动此任务
gulp.task('css',function(){
    //1.找到文件
    gulp.src('views/css/*.css')
    //2.压缩文件
    .pipe(minifyCss())
    //3.另存为压缩文件
    .pipe(gulp.dest('views/dist1/css'))
}) 

//在命令行使用gulp script启动此任务
gulp.task('script',function(){
    //1.找到文件
    gulp.src('views/js/*.js')
    //2.压缩文件
    .pipe(uglify())
    //另存压缩后的文件
    .pipe(gulp.dest('views/dist1/js'))
})

//压缩图片任务
//在命令输入gulp images启动此任务
gulp.task('images',function(){
     //1.找到图片gulp
     gulp.src('views/images/*.*')
     //2.压缩图片
     .pipe(imagemin({
        progressive:true
     }))
     //3.另存图片
     .pipe(gulp.dest('views/dist1/images'))
});

//编译less
//在命令行输入gulp less启动此任务
gulp.task('less',function(){
    //1.找到less文件
    gulp.src('views/less/**.less')
    //2.编译为css
    .pipe(less())
    //3.另存为css
    .pipe(gulp.dest('views/dist1/css1'))
})

//在命令使用gulp auto启动此文件
gulp.task('auto',function(){
     //监听文件修改，当文件被修改则执行css任务
     gulp.watch('views/css/*.css',['css'])
});

//在命令行使用gulp auto启动此任务
gulp.task('auto',function(){
    //监听文件修改，当文件被修改则执行script任务
    gulp.watch('views/js/*.js',['script'])
})

//在命令使用gulp auto启动此任务
gulp.task('auto',function(){
    //监听文件修改，当文件被修改则执行images任务
    gulp.watch('views/images/*.*',['images'])
});


//在命令行gulp auto启动此任务
gulp.task('auto',function(){
    //监听文件修改，当文件修改则执行less任务
    gulp.watch('views/less/**.less',['less'])
})

//自动刷新
gulp.task('connect',function(){
    connect.server({
         port:3000,
         livereload:true
    });
});
//找到文件、刷新
gulp.task('html',function(){
     gulp.src('./views/*.html')
     .pipe(connect.reload());
});
//监听修改
gulp.task('watch',function(){
     gulp.watch('./views/*.css',['html']);
     gulp.watch('./views/*.js',['html']);
     gulp.watch('./views/*.html',['html']);
});

//使用gulp.task('default')定义默认任务
//在命令行使用gulp启动script,css,images任务和auto任务，connect,watch为自动刷新任务
gulp.task('default',['css','script','images','less','auto','connect','watch'])