文档章节

关于gulp 压缩css js img 心得

火星撞地球-
 火星撞地球-
发布于 2016/12/09 17:54
字数 664
阅读 116
收藏 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
0
gulp之自动化静态资源压缩合并加版本号

gulp之自动化压缩合并加版本号 这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。 先把下面这里插件 npm i (插件名) -D 安装到项目环境内 gu...

周大侠啊
03/29
0
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
0
grunt vs gulp

目前前端开发比较常见的构建工具有grunt和gulp,特点通过定义任务的方式,使用第三方插件进行js或css的文件编译,打包、压缩等工作 grunt 早期设计的前端构建框架,插件丰富 任务的定义使用配...

_huangbo
2016/06/08
3
0
核桃工具第2个-在线前端性能优化建议服务

从上次发布 在线js压缩服务以来,虽然界面很烂,还有一些bug,不过还是有一些朋友使用,并且得到一些反馈, 核桃工具第2个-在线前端性能优化建议服务 地址 http://tool.hetaoblog.com/web/we...

核桃博客
2011/08/07
602
7

没有更多内容

加载失败,请刷新页面

加载更多

linux之自定义命令

本人使用的是ubuntu系统,不喜欢建各种桌面快捷链接,但是每次启动个软件,去查找又麻烦,所以自定义了命令,来快捷的启动应用: 1、修改/etc/bash.bashrc,在文件末尾,加上如下List-1中的内...

克虏伯
8分钟前
0
0
linux基础

系统安全 sudo su chmod setfacl 进程管理 w top ps kill pkill pstree killall 用户管理 id usermod useradd groupad userdel 文件系统 mount umount fsck df du 网络应用 curl telnet mail......

关元
10分钟前
0
0
Caffe-源码分析(一)

CHECK_X函数,用于比较两个blob之间的值 CHECK_EQ(x,y)<<"x!=y",EQ即equation,意为“等于”,当x!=y时,函数打印出x!=y。 CHECK_NE(x,y)<<"x=y",NE即not equation,意为“不等于”,,...

Pulsar-V
10分钟前
0
0
三星Galaxy S10可能会配备TOF 3D摄像头

12月3日消息,据Phone Arena报道,三星Galaxy S10可能会配备TOF 3D摄像头。 Phone Arena报道称三星Galaxy S10一共有五颗摄像头(前置双摄+后置三摄),而5G版本的Galaxy S10后置四颗摄像头,...

问题终结者
33分钟前
9
0
fabric增删改查Mac

备份1.3版本,重新下载1.1版本到fabric文件夹 /opt/gopath/src/github.com/hyperledger/fabric -> /opt/gopath/src/github.com/hyperledger/fabric1.3 新建/opt/gopath/src/github.com/hype......

八戒八戒八戒
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部