gulp学习点滴

gulp学习点滴_第1张图片

项目目录

现在要对当前的项目进行压缩,对里面的样式,图片,脚本,静态页面进行压缩
在网上找了找看有没有现成的工具使用
因为项目用的是seajs,所以想找一个能对模块合并的方法,但是目前还没有合适的方法,网上的方法 gulp-seajs-combo gulp-alias-combo ,对我有配置的sea.config都没有很好的支持,所以我放弃了,还是先压缩再考虑合并问题,花了几天的时间先了解nodejs,gulp
百度,google了一堆教程,先安装了nodejs, gulp gulp插件集锦
用的是visual studio code开发
先把工具配好,参考 Visual Studio Code 使用 Typings 实现智能提示功能

//在你的项目根目录下创建gulpfile.js,代码如下:
/// 
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var changed = require('gulp-changed');  
var debug = require('gulp-debug');
var del = require('del'); //删除文件
var watch = require('gulp-watch');//监控文件变化
var batch = require('gulp-batch');
var vinylPaths = require('vinyl-paths');//虚拟管道
var filter = require('gulp-filter'); //文件过滤
var livereload = require('gulp-livereload');
var newer = require('gulp-newer');
var htmlmin = require('gulp-htmlmin'), //html压缩
    imagemin = require('gulp-imagemin'),//图片压缩
    pngcrush = require('imagemin-pngcrush'),
    minifycss = require('gulp-minify-css'),//css压缩
    jshint = require('gulp-jshint'),//js检测
    uglify = require('gulp-uglify'),//js压缩
    UglifyJS = require('uglify-js'), //JS压缩
    concat = require('gulp-concat'),//文件合并
    rename = require('gulp-rename'),//文件更名  
    through = require("through2"),
    plumber = require('gulp-plumber');

图片压缩任务

gulp.task('buildimg', function() {
    return gulp.src('./{distributor,consumer,retailer}/image/*.{png,jpg}', { base: './' })    
        .pipe(changed('build'))   
        .pipe(debug({title: '编译:'}))
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest('build'));
});

样式任务

gulp.task('buildCss', function() {
    return gulp.src('./{distributor,consumer,retailer}/css/*.css', { base: './' })
        .pipe(debug({title: '编译:'}))
        .pipe(minifycss())
        .pipe(gulp.dest('build'));
});

脚本任务

gulp.task('buildjs', function() {
     return gulp.src(['./{distributor,consumer,retailer}/js/*.js',
                      './js/*.js',
                      './js/jquery/1.11.3/*.js',                      
                      './js/{jquery,seajs}/*.js',
                      '!./{distributor,consumer,retailer}/js/jquery-*.js'], { base: './' })
        .pipe(changed('build'))
        .pipe(debug({title: '编译:'}))
        // .pipe(concat('all.js'))
        // .pipe(gulp.dest('dest/js'))
        // .pipe(rename({ suffix: '.min' }))
        .pipe(uglify({
            //mangle: true,//类型:Boolean 默认:true 是否修改变量名
            mangle: {except: ['require' ,'exports' ,'module' ,'$','wx','wxjsconfig']}//排除混淆关键字
        }))
        .pipe(gulp.dest('build'));
});

html

gulp.task('buildhtml', function () {
      
  return gulp
    .src('./{distributor,consumer,retailer}/page/*.html',{ base: './' })
    .pipe(changed('build'))
    .pipe(debug({title: '编译:'}))
    .pipe(through.obj(function(file, encode, cb) {
    var contents = file.contents.toString(encode);       
        var HTMLMinifier = require("html-minifier").minify; //压缩
        var minified = HTMLMinifier(contents, {
          minifyCSS: true,
          minifyJS: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        });
        file.contents = new Buffer(minified, encode);
        cb(null, file, encode);     
    }))
    .pipe(gulp.dest('build'));
});

文件监控,这个花的时间最多,对文件的新增,删除,修改都有及时的反应


function isunlink(file) {    
    return file.event === 'unlink';
}

var filterisunlink = filter(isunlink, {restore: true});

function getfiletype(file)
{
    var filepath = file.path;    
        var index = filepath.lastIndexOf('.');
        var filetype = "";        
        if(index>0)
            filetype = filepath.substring(index,filepath.length);  
    return filetype;
}

function isAdded(file) {  
    
    return file.event === 'add' || file.event === 'change';
}
function ishtml(file)
{
    return getfiletype(file) == ".html";
}
function isjs(file)
{
    return getfiletype(file) == ".js";
}
function isCSS(file)
{
    return getfiletype(file) == ".css";
}
function isImage(file)
{
    return getfiletype(file) == ".jpg" || getfiletype(file) == ".png";
}
var filterAdded = filter(isAdded, {restore: true});

var filterHtml = filter(ishtml,{restore: true});

var filterJs = filter(isjs,{restore: true});

var filterCss = filter(isCSS,{restore: true});

var filterImage = filter(isImage,{restore: true});

gulp.task('buildwatch', function () {    
    return gulp.src('./{distributor,consumer,retailer,js}/**', { base: './' })
        .pipe(watch('./{distributor,consumer,retailer,js}/**'))
        .pipe(filterAdded)
        .pipe(debug({title: '编译:'}))      
        .pipe(filterHtml)        
        .pipe(through.obj(function(file, encode, cb) {
            var contents = file.contents.toString(encode);       
            var HTMLMinifier = require("html-minifier").minify; //压缩
            var minified = HTMLMinifier(contents, {
            minifyCSS: true,
            minifyJS: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            });
            file.contents = new Buffer(minified, encode);
            cb(null, file, encode);     
        }))
        .pipe(filterHtml.restore)
        .pipe(filterJs)
         .pipe(uglify({
            //mangle: true,//类型:Boolean 默认:true 是否修改变量名
            mangle: {except: ['require' ,'exports' ,'module' ,'$','wx','wxjsconfig']}//排除混淆关键字
        }))
        .pipe(filterJs.restore)
         .pipe(filterImage)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(filterImage.restore)
        .pipe(filterCss)
        .pipe(minifycss())
        .pipe(filterCss.restore)
        .pipe(gulp.dest('build'))        
        .pipe(filterAdded.restore)       
        .pipe(filterisunlink)          
        .pipe(gulp.dest('build'))
        .pipe(vinylPaths(del))
        .pipe(filterisunlink.restore)
        .pipe(livereload());     
});

之前的版本,对新增及删除,支持不太好

// gulp.task('watch',function(){
//     // 监听html文件变化    
//     var watcher = gulp.watch('{distributor,consumer,retailer,js}/**');
//     watcher.on('change', function(event) {
//         var filepath =  event.path;
//         var index = filepath.lastIndexOf('.');
//         var filetype = "";
//         console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
//         if(index>0)
//             filetype = filepath.substring(index,filepath.length);               
//         switch(filetype)
//         {
//             case '.html':
//                 gulp.run('buildhtml');
//             break;
//             case '.js':
//                 gulp.run('buildjs');
//             break;
//             case '.css':
//                 gulp.run('buildCss');
//             break;
//             case '.png':
//             case '.jpg':            
//                 gulp.run('buildimg');
//             break;
//             default:
//             console.log("没有找到该类型的文件" + filetype);
//         }        
        
//     });
// })

待续 2015-05-15 19:57
参考&进一步阅读
是时候搁置Grunt,耍一耍gulp了
前端打包构建工具gulp快速入门
Gulp:插件编写入门
gulp:更简单的自动化构建工具

你可能感兴趣的:(gulp学习点滴)