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

     
    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'])

    7.执行

        gulp

    ps:如直接复制gulpfile.js文件,需更改项目地址

  • 相关阅读:
    OpenCV---在图片上加入文字
    DosBox 报错 this program requires dosxnt.exe to be in your path
    iOS开发-UITableView单选多选/复选实现1
    LeetCode第七题,Reverse Integer
    【PostgreSQL】PostgreSQL操作-psql基本命令
    Bootstrap的js插件之弹出框(popover)
    Qt Quick 图像处理实例之美图秀秀(附源代码下载)
    【甘道夫】并行化频繁模式挖掘算法FP Growth及其在Mahout下的命令使用
    用Visual Studio高版本号打开低版本号的project,转换时出现错误:fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
    如何安装ArchLinux
  • 原文地址:https://www.cnblogs.com/CaktyRiven/p/6419719.html
Copyright © 2011-2022 走看看