zoukankan      html  css  js  c++  java
  • 关于gulp的压缩js和css

    npm install --global gulp

    npm install gulp --save-dev

    在项目根目录下创建一个名为 gulpfile.js 的文件

    var gulp = require('gulp');

    gulp.task('default', function() {
      // 将你的默认的任务代码放在这
    });

    npm install  gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

    // 引入 gulp及组件
    var gulp=require('gulp'),  //gulp基础库
        minifycss=require('gulp-minify-css'),   //css压缩
        concat=require('gulp-concat'),   //合并文件
        uglify=require('gulp-uglify'),   //js压缩
        rename=require('gulp-rename'),   //文件重命名
        jshint=require('gulp-jshint'),   //js检查
        notify=require('gulp-notify');   //提示
    
    gulp.task('default',function(){
        gulp.start('minifycss','minifyjs');
    });
     
    //css处理
    gulp.task('minifycss',function(){
       return gulp.src('htdocs/kunpeng/static/css/*.css')      //设置css
           .pipe(concat('order_query.css'))      //合并css文件到"order_query"
           .pipe(gulp.dest('dist/styles'))           //设置输出路径
           .pipe(rename({suffix:'.min'}))         //修改文件名
           .pipe(minifycss())                    //压缩文件
           .pipe(gulp.dest('dist/styles'))            //输出文件目录
           .pipe(notify({message:'css task ok'}));   //提示成功
    });
    
    //JS处理
    gulp.task('minifyjs',function(){
       return gulp.src(['/static/js/juicer-min.js','/static/js/bootstrap.min.js','/static/js/bootstrap-datetimepicker.min.js','/static/js/order_query.js'])  //选择合并的JS
           .pipe(concat('order_query.js'))   //合并js
           .pipe(gulp.dest(''dist/js'))         //输出
           .pipe(rename({suffix:'.min'}))     //重命名
           .pipe(uglify())                    //压缩
           .pipe(gulp.dest('dist/js'))            //输出 
           .pipe(notify({message:"js task ok"}));    //提示
    });

    注意:使用gulp3版本可用

    gulp.task('default',['minifycss','minifyjs']);

    转载地址 https://www.cnblogs.com/liangdaye/p/4956284.html
  • 相关阅读:
    C# 填充客户端提交的值到T对象
    mvc中hangfire全局简单配置
    mvc企业微信开发全局配置
    js获取简单表单对象(1)
    MVC伪静态路由简单搭配
    [转]一些实用的图表Chart制作工具
    【转】SQL Server 数据库内部版本号
    SVN的搭建和使用总结
    解决ext时间插件在谷歌下变宽的BUG
    Hibernate中Session.get()/load()之区别
  • 原文地址:https://www.cnblogs.com/yihuite-zch/p/10482563.html
Copyright © 2011-2022 走看看