文档章节

关于gulp 压缩css js img 心得

火星撞地球-
 火星撞地球-
发布于 2016/12/09 17:54
字数 664
阅读 113
收藏 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
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
gulp完全开发指南 => 快来换掉你的Grunt吧

最近一直在构建Angular应用,通过bower管理前端包依赖,然后通过gulp和它配合.发现gulp相比于grunt真的很轻,现在我的项目中已经取代了grunt.这里把我的一些实践记录下来和大家分享一下. gulp定...

顽Shi
2014/06/03
0
3
gulp 的 js 压缩插件 —— gulp-lzmajs

简介 用过 gulp 的用户可能都知道 gulp-concat 和 gulp-uglify 这两个插件,一个用于合并文件,另一个用于对 js 进行语法压缩。虽然通过文件合并和语法压缩可以有效的减小 js 文件的体积,但...

andot
2015/08/07
0
1
Gulp和Webpack工具的区别

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

easonjim
2016/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式:简单工厂模式(静态共产方法模式)

简单工厂的构成包括三个角色: 1)抽象产品类 2)具体产品类(继承抽闲产品类) 3)工厂类(生产具体产品) 具体代码实现 1、抽象产品类 /** * 抽象类 */public abstract class Car ...

京一
3分钟前
0
0
Lombok使用

1 介绍 Lombok是一个简单的Java库,改工具可以通过注解自动地提供一些方法,简化开发。比如编写POJO时需要为每个属性提供getter()方法和setter()方法,这就可以使用Lombok实现。 2 配置 Lomb...

SuperHeroes
11分钟前
0
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
13分钟前
0
0
java虚拟机之内存模型

1. 概述 对于从事 C、C++ 程序开发的人员来说,在内存管理领域,他们既是拥有最高权力的「皇帝」又是从事基础工作的「劳动人民」 --- 既拥有每个对象的「所有权」,又担负着每一个对象生命开...

firepation
15分钟前
0
0
解决linux的-bash: ./xx: Permission denied

解决linux的-bash: ./xx: Permission denied 在linux下执行sh文件时提示下面信息: -bash: ./xx.sh: Permission denied解决:chmod 777 xx.sh 1 2 3 4 Linux chmod +755和chmod +777 ......

DemonsI
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部