关于gulp 压缩css js img 心得
关于gulp 压缩css js img 心得
火星撞地球- 发表于1年前
关于gulp 压缩css js img 心得
  • 发表于 1年前
  • 阅读 109
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 这是window系统下的gulp

哈哈···欢迎你来到我的博客,我把我这几天用到的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方面内容,希望大家继续关注

 

共有 人打赏支持
粉丝 2
博文 2
码字总数 1125
×
火星撞地球-
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: