文档章节

关于gulp 压缩css js img 心得

火星撞地球-
 火星撞地球-
发布于 2016/12/09 17:54
字数 664
阅读 111
收藏 0
点赞 1
评论 0

哈哈···欢迎你来到我的博客,我把我这几天用到的gulp做了一个总结,欢迎批评指正。

1.首先要装window版的node,node安装路径不限制;

2.在要压缩的项目的根目录的下面打开cmd(方法:按shift键+鼠标右键 找到在此处打开命令窗口)

3.安装gulp  第一步:npm install --global gulp 第二步:npm install gulp --save-dev 第三步:npm init;这一步是产生packge.json文件  这个文件自己产生的不完整因为首次使用你也不知道要用插件的哪个版本

那我就为大家准备了一份较完整的,package.json跟产生的node_modules文件同级

附文:package.json文件

{
  "name": "nsyc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress --colors",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "keywords": [],
  "author": "vanboo",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.17.6",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "gulp": "^3.8.10",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-file-include": "0.13.7",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^2.0.4",
    "gulp-util": "~2.2.9",
    "gulp-watch": "4.1.0",
    "gulp.spritesmith": "^6.2.1",
    "merge2": "^1.0.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vinyl-buffer": "^1.0.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2",
    "webpack-zepto": "0.0.1"
  }
}

 

4.创建gulpfile.js文件文件位置跟package.json文件同级;

5.cmd命令行按装插件

npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev

6.在gulpfile.js里面 定义你要使用的方法:

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    htmlmin = require('gulp-htmlmin'),
    imagemin = require('gulp-imagemin'),//图片压缩
    pngcrush = require('imagemin-pngcrush'),
    cdn = require('gulp-cdn-replace'),
    replace = require('gulp-replace'),
    runSequence = require('run-sequence'),
    gulpSequence=require('gulp-sequence'),
    prefix = require('gulp-prefix'),
    rev = require('gulp-rev'),//更改版本号
    revCollector = require('gulp-rev-collector'),
//  clean = require('gulp-clean'),
//  jshint = require('gulp-jshint'),//js检测
//  concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),//提示信息
    del = require('del');

gulp.task('minifycss', function() {
    return gulp.src('css/*.css')      //压缩的文件
        .pipe(minifycss())//执行压缩
        .pipe(replace("..","https://static.gomefund.com/m1/20161220"))
        .pipe(gulp.dest('minified/css'))
        .pipe(rev())
        .pipe(gulp.dest('minified/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('minified/css'));
        
});

gulp.task('scriptjs', function() {
    return gulp.src('js/**/*.js')
        .pipe(replace("../img","https://static.gomefund.com/m1/20161220/img"))
        .pipe(replace("../tpl","https://m1.gomefund.com/h5/tpl"))
        .pipe(uglify())  
        .pipe(gulp.dest('minified/js'))
        .pipe(rev())
        .pipe(gulp.dest('minified/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('minified/js'));
});
gulp.task('img', function() {
return gulp.src('img/**/*.+(png|PNG|gif)')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('minified/img'))
    .pipe(rev())
    .pipe(gulp.dest('minified/img'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('minified/img'))
    .pipe(notify({ message: 'img task ok' }));
});
gulp.task('Tom1',function(){
    return gulp.src('tpl/*.html')
           .pipe(replace("..","https://static.gomefund.com/m1/20161220"))
           .pipe(gulp.dest('minified/tpl'));          
})
gulp.task('rev', function () {
    return gulp.src(['minified/**/*.json', 'minified/tpl/**.html'])
        .pipe( revCollector({
            replaceReved: true,
            dirReplacements: {
                'css/': 'css/',
                'js/': 'js/',
                'img/':'img/',
                'cdn/': function(manifest_value) {
                    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                }
            }
        }) )
        .pipe( gulp.dest('minified/tpl') );
        
});
gulp.task('default', function(cb){
    gulpSequence(['img','scriptjs','minifycss','Tom1','rev'],cb);
});


//gulp.task('img', function() {
//return gulp.src('h5/img/**/*.+(png|PNG|gif)')
//  .pipe(imagemin({
//      progressive: true,
//      svgoPlugins: [{removeViewBox: false}],
//      use: [pngcrush()]
//  }))
//  .pipe(gulp.dest('minified/img'));
//  //.pipe(notify({ message: 'img task ok' }));
//});

7.如果要添加版本号记得更改gulp-rev和gulp-rev-collector这两个文件现在把更改方法链接附在下面:

http://www.cnblogs.com/tnnyang/p/6023475.html

我会持续更新gulp方面内容,希望大家继续关注

 

© 著作权归作者所有

共有 人打赏支持
火星撞地球-
粉丝 1
博文 2
码字总数 1125
作品 0
昌平
程序员
一天掌握构建化工具Grunt、gulp、webpack(下)

1、gulp篇 中文主页: http://www.gulpjs.com.cn/ 上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备,如果没有看到的话,链接在下面 https://my.oschina.net/mdxlcj/blog/1...

木九天 ⋅ 04/27 ⋅ 0

nodeJS压缩代码、jade

一、jade: 一、终端命令(在存放jade的文件夹下) 1、全局安装jade: npm install jade -g 2、不压缩html: jade -P test.jade 3、监听jade文件: jade -P -w test.jade 会在 .jade 文件下生成 ...

曹国莉 ⋅ 06/05 ⋅ 0

Gulp和Webpack工具的区别

引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Gr...

easonjim ⋅ 2016/12/24 ⋅ 0

如何有效实现前端压缩图片并上传功能

  随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么...

燚轩科技 ⋅ 04/23 ⋅ 0

Tobias Koppers:我当初为什么写webpack

编者按:本文转载自众成翻译, 由为之漫笔翻译 Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScr...

奇舞周刊 ⋅ 04/23 ⋅ 0

How Webkit works笔记

主要是参考google的这个幻灯片 webkit的作用就是将html,css,javascript渲染成web page。 它的主要组件有: api接口 webkit,webkit2 和平台的具体实现做绑定 bindings。绑定的准确定义我还...

yhchinabest ⋅ 04/15 ⋅ 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特...

zhoulujun ⋅ 05/22 ⋅ 0

志筛选记录、日志切割、过期时间设置

11.22 访问日志不记录静态文件 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 把虚拟主机配置文件改成如下:在custom上边进行配置 重新加载配置文件 -t, graceful 11.23...

派派菠菜 ⋅ 05/31 ⋅ 0

5月30日任务 访问日志不记录静态文件、访问日志切割、静态元素过期时间

11.22 访问日志不记录静态文件 ErrorLog "logs/abc.com-error_log" SetEnvIf Request_URI "..gif$" img SetEnvIf Request_URI "..jpg$" img SetEnvIf Request_URI "..png$" img SetEnvIf Req......

吕湘颖 ⋅ 05/14 ⋅ 0

从零开始到发布上线,如何自定义一个webpack loader

关于 前两天在使用webpack搭建移动端web的时候,需要使用到动态修改html的font-size。考虑到只有几行代码,我想把镶嵌到中,同时我希望能够随时修改它的源码,并且最后输出到html中是压缩过后的...

林楠 ⋅ 05/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 44分钟前 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

前言 我是上学期学的汇编,因为有vs又不想用课上教的麻烦的dosbox以及masm32,但是一直没找到高亮插件和能调试的(难在运行不了而找不到答案上,出现的错误在最后放出,还请先达们不吝指点)...

simpower ⋅ 54分钟前 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 57分钟前 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 今天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 今天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 今天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 今天 ⋅ 0

Java对象的序列化与反序列化

Java对象的序列化与反序列化

Cobbage ⋅ 今天 ⋅ 0

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 今天 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部