类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

工具/原料

  • nodejs/npm

方法/步骤

  1. 首先要确保pc上装有node,然后在global环境和项目文件中都install gulp

    npm install gulp -g   (global环境)

    npm install gulp --save-dev (项目环境)

     
  2.  

    在项目中install需要的gulp插件,一般只压缩的话需要

    npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

    更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins/

    注:gulp-minify-css(css压缩)、 gulp-concat(文件合并)、 gulp-uglify(js压缩)、 gulp-rename(重命名文件)

  3.  

    在项目的根目录新建gulpfile.js,require需要的module

    var gulp = require('gulp'),
    
        minifycss = require('gulp-minify-css'),
    
        concat = require('gulp-concat'),
    
        uglify = require('gulp-uglify'),
    
        rename = require('gulp-rename'),
    
        del = require('del');
  4.  压缩css
    gulp.task('minifycss', function() {
    
        return gulp.src('src/*.css')      //压缩的文件
    
            .pipe(gulp.dest('minified/css'))   //输出文件夹
    
            .pipe(minifycss());   //执行压缩
    
    });
  5.  压缩js
    gulp.task('minifyjs', function() {
    
        return gulp.src('src/*.js')
    
            .pipe(concat('main.js'))    //合并所有js到main.js
    
            .pipe(gulp.dest('minified/js'))    //输出main.js到文件夹
    
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
    
            .pipe(uglify())    //压缩
    
            .pipe(gulp.dest('minified/js'));  //输出
    
    });
  6.  执行压缩前,先删除文件夹里的内容
    gulp.task('clean', function(cb) {
    
        del(['minified/css', 'minified/js'], cb)
    
    });
  7.  默认命令,在cmd中输入gulp后,执行的就是这个命令
    gulp.task('default', ['clean'], function() {
    
        gulp.start('minifycss', 'minifyjs');
    
    });
  8.  然后只要cmd中执行,gulp即可

gulp入门-压缩js/css文件(windows)的更多相关文章

  1. MVC打包压缩JS&CSS文件调试时过滤了一些文件

    BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件:   后台跟踪了 ...

  2. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  3. IIS7.5打开GZip压缩,同时启用GZip压缩JS/CSS文件的设置方法[bubuko.com]

    IIS7.5或者IIS7.0开启GZip压缩方法:打开IIS,在右侧点击某个网站,在功能视图中的“IIS”区域,双击进入“压缩”,如图下图: 分别勾选“启用动态内容压缩”和“启用静态内容压缩”.这样最 ...

  4. Web网站配置Gzip,压缩js css文件

    启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...

  5. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  6. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  7. JS&CSS文件请求合并及压缩处理研究(五)

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  8. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

  9. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

随机推荐

  1. [AGC002D] Stamp Rally (并查集+整体二分)

    Description 给你一个n个点m个条边构成的简单无向连通图,有Q组询问,每次询问从两个点x,y走出两条路径,使这两条路径覆盖z个点,求得一种方案使得路径上经过的变的最大编号最小. Input ...

  2. HDOJ 1085 Holding Bin-Laden Captive!

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  3. Firebug Console API

    原文发布时间为:2011-06-06 -- 来源于本人的百度文章 [由搬家工具导入] Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下 ...

  4. 为了兼容性问题,本人一律淘汰不兼容如下三种浏览器的js

    原文发布时间为:2009-04-16 -- 来源于本人的百度文章 [由搬家工具导入] JavaScript: 不兼容 IE    FF火狐   Google 一律不作收藏了。。。。 最好还能兼容 Op ...

  5. hdu 6218 Bridge 线段树 set

    题目链接 题意 给一个\(2\)x\(n\)的矩阵,每个格子看成一个点,每个格子与相邻的格子间有边.现进行一些加边与删边操作,问每次操作后图中有多少条割边. 思路 参考 https://www.cnb ...

  6. AC日记——Oulipo poj 3461

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 37958   Accepted: 15282 Description The ...

  7. python接口自动化(四十)- logger 日志 - 下(超详解)

    简介 按照上一篇的计划,这一篇给小伙伴们讲解一下:(1)多模块使用logging,(2)通过文件配置logging模块,(3)自己封装一个日志(logging)类.可能有的小伙伴在这里会有个疑问一个l ...

  8. Ceres Solver: 高效的非线性优化库(一)

    Ceres Solver: 高效的非线性优化库(一) 注:本文基于Ceres官方文档,大部分由英文翻译而来.可作为非官方参考文档. 简介 Ceres,原意是谷神星,是发现不久的一颗轨道在木星和火星之间 ...

  9. Hadoop OutputFormat浅析

    问题:reduce输出时,如果不是推测任务写结果时会先写临时目录最后移动到输出目录吗? 下面部分转自Hadoop官网说明 OutputFormat 描述Map/Reduce作业的输出样式. Map/R ...

  10. vue开发小程序简介

    开发环境搭建 nodejs 安装最新版的nodejs,同时安装cnpm包管理器 jdk1.8 apache-maven3.3.9 Intellij Idea2018 [后端开发工具] vscode[前 ...