//  淘宝镜像 http://npm.taobao.org/ 

var gulp = require('gulp');

var htmlMin = require('gulp-minify-html'); // html min   "gulp-minify-html"  是它的升级版本 "gulp-htmlmin"

var cleanCSS = require('gulp-clean-css'); //  css min    "gulp-clean-css" 是它的升级版本  "gulp-minify-css"

var uglify = require('gulp-uglify');     //  js min   压缩丑化js

var useref = require('gulp-useref');     //  useref  合并页面引入的css或者  js

var gulpIf = require('gulp-if');     //  gulpIf  判断 css 或者js或者html ...

var concat = require('gulp-concat');     // 合并 css 或者js

var del = require('del');         // 清理文件夹

var jshint = require('gulp-jshint');         // jsHint

var stylish = require('jshint-stylish');  //   jshint-stylish   生成验证日志文档

var rev = require('gulp-rev');  //   rev    md5 编码 文件，另外可以生成   rev_mainifest.json  文件

var revCollector = require('gulp-rev-collector');  //    替换文件中 rev_mainifest.json 对应的内容

var imagemin = require('gulp-imagemin');  //  图片压缩工具，支持 jpg  gif   png  svg 压缩

var rename = require("gulp-rename");

var spritesmith = require("gulp-spritesmith");

var cssSprite = require("gulp-css-spritesmith");

var gzip = require('gulp-gzip');

var browserSync = require('browser-sync').create();

// 完美及时刷新

// 静态服务器

gulp.task('browser-sync', function() {

    browserSync.init({

        server: {

            baseDir: "./"

        }

    });

});

// 代理

gulp.task('browser-sync', function() {

    browserSync.init({

        proxy: "你的域名或IP"

    });

});

http://www.browsersync.cn/docs/api/  

//   gzip

//  https://www.npmjs.com/package/gzip 文件

生成雪碧图 http://npm.taobao.org/package/gulp-css-spritesmith  

//  sprite

gulp.task('sprite', function() {  

 return gulp.src('./web/images/*.png')

.pipe(

spritesmith({

imgName: 'web/images/sprite.png',

destCSS: 'web/css/sprite.css'

})

); 

}); 

// 自动雪碧图

// autoSprite, with media query

gulp.task('autoSprite', function() {

    gulp.src('web/css/*.css').pipe(cssSprite({

        // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/

        imagepath: 'web/images/',

        // 映射CSS中背景路径，支持函数和数组，默认为 null

        imagepath_map: null,

        // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/

        spritedest: 'web/images',

        // 替换后的背景路径，默认 ../images/

        spritepath: '../images',

        // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0

        padding: 10,

        // 是否使用 image-set 作为2x图片实现，默认不使用

        useimageset: false,

        // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件

        newsprite: false,

        // 给雪碧图追加时间戳，默认不追加

        spritestamp: true,

        // 在CSS文件末尾追加时间戳，默认不追加

        cssstamp: true

    }))

    .pipe(gulp.dest('test/'));

});

//  htmlMin

gulp.task('htmlMinTest', function () {

var opts = {

spare : true, //不删除多余属性

conditionals : true, //保持 if 条件判断

quotes : true //不移除双引号

};

var task = gulp.src('web/html/*.html')

.pipe(cleanCSS({compatibility: 'ie8'})) //  压缩css

.pipe(htmlMin(opts)) // 压缩html 

.pipe(gulp.dest('test/web/html'));

return task;

});

//  启动程序

gulp.task('startImages',['autoSprite','htmlMinTest'] ,function() {

  // 

});

//  htmlMin

gulp.task('htmlMin', function () {

var opts = {

spare : true, //不删除多余属性

conditionals : true, //保持 if 条件判断

quotes : true //不移除双引号

};

var task = gulp.src('src/html/*.html')

.pipe(cleanCSS({compatibility: 'ie8'})) //  压缩css

.pipe(htmlMin(opts)) // 压缩html 

.pipe(gulp.dest('web/html'));

return task;

});

var gulp = require('gulp');

var htmlMin = require('gulp-minify-html'); // html min   "gulp-minify-html"  是它的升级版本 "gulp-htmlmin"

//  htmlMin

gulp.task('htmlMin2', function () {

var opts = {

spare : true, //不删除多余属性??

conditionals : true, //保持 if 条件判断

quotes : true //不移除双引号

};

var task = gulp.src('src/html/useref.html')

.pipe(htmlMin(opts)) // 压缩html 

.pipe(gulp.dest('web/html'));

return task;

});

//  cssMin

gulp.task('cssMin', function() {

  return gulp.src('src/css/*.css')

.pipe(cleanCSS({compatibility: 'ie8'}))

.pipe(gulp.dest('web/css'));

});

// concat

//  concat

gulp.task('concat', function() {

    return gulp.src(['src/css/*.css','src/js/*.js'])

        .pipe(gulpIf('*.css',concat('main.css')))// js 压缩

        .pipe(gulpIf('*.js',concat('main.js')))// js 压缩

.pipe(gulpIf('*.js',uglify()))// js 压缩

.pipe(gulpIf('*.css',cleanCSS()))// js 压缩

        .pipe(gulp.dest('web')) //  文件输出

});

// del

gulp.task('del', function () {

    return del([

        'web/css/*.css',  // 删除css 文件夹下的所有css文件

        'web/css/*' //  删除css 文件夹下的所有文件

//'!web/css/test.css',  // 不删除  css 文件夹下的test.css 文件

//'!web/css/*.json' // 不删除 css 文件夹下的所有json文件

    ]);

});

//  js 验证

gulp.task('hint', function() {

    return gulp.src('src/js/*.js')

.pipe(jshint())

.pipe(jshint.reporter('jshint-stylish'))

.pipe(jshint.reporter('fail'))

});

//  rev  css 命令项

gulp.task('css',['js'],function () {

    return gulp.src('src/css/*.css')

        .pipe(rev())

        .pipe(gulp.dest('web/css'))

        .pipe( rev.manifest() )  //  生成  rev_mainifest.json  文件

        .pipe( gulp.dest( 'rev/css' ) );

});

gulp.task('js', function () {

    return gulp.src('src/js/*.js')

        .pipe(rev())

        .pipe(gulp.dest('web/js'))

        .pipe( rev.manifest() ) //  生成  rev_mainifest.json  文件

        .pipe( gulp.dest( 'rev/js' ) );

}); 

// rev

gulp.task('rev', function () {

    return gulp.src(['rev/**/*.json', 'web/**/*.js'])

.pipe( revCollector({

replaceReved: true,  // 替换页面的文件名前面的路径

dirReplacements: {

'one': 'two',

'js/': 'web/js/',

'cdn//': function(manifest_value) {

console.log('测试'+manifest_value)

return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;

}

}

}) )

.pipe( gulp.dest('web') );

}); 

// rename

//  这个地多文件转换

gulp.task('rename',function(){

return   gulp.src('src/css/*css')

 .pipe(rename(function(path){

            path.dirname+="/new";  // 文件的直接路径

            path.basename+=".min"; // 原来的文件名    +=  表示在原来名字的基础上新增加名字

            path.extname=".css";  // 文件的后缀

        }))

        .pipe(gulp.dest("src")); // get-rename/new/test1.min.js   get-rename/new/test2.min

});

//  useref

gulp.task('useref', function () {

    return gulp.src('src/html/**/*.html')

.pipe(useref()) // 文件合并

//.pipe(htmlMin()) //  html  压缩 。注意这里不能直接html压缩，这样压缩会导致js压缩后报错，然后就能用 uglify插件 css 类似，一定要先进行if判断  ,

// 下面是针对页面的 html  和 css  压缩方法  

// .pipe(gulpIf('*.html',uglify()))  js 压缩,页面js压缩会报错， css 压缩

// .pipe(gulpIf('*.html',cleanCSS()))// css 压缩     会出现  "__ESCAPED_SOURCE_END_CLEAN_CSS__",

//所以页面必须结构层，行为层，表现层分离 

// 文件压缩

.pipe(gulpIf('*.css',cleanCSS()))// css 压缩 

//.pipe(gulpIf('*.js',uglify()))// js 压缩 

.pipe(gulpIf('*.html',htmlMin()))// html 压缩

// 文件输出

        .pipe(gulp.dest('web/src/html')); 

});

// imagemin

gulp.task('imagemin',function(){

return   gulp.src('src/images/**/*')

.pipe(imagemin({

verbose:true  //

}))

  .pipe(gulp.dest('web/src/images'));

});

//  jsMin

gulp.task('jsMin', function() {

    return gulp.src('src/js/**/*.js')

        .pipe(uglify())

        .pipe(gulp.dest('web/src/js'));

});

//  启动程序

gulp.task('pipeStart',['useref','imagemin' ,'jsMin'] ,function() {

  // 

});

//  jsMin

gulp.task('jsMin', function() {

    return gulp.src('src/js/**/*.js')

        .pipe(uglify())

        .pipe(gulp.dest('web/src/js'));

});

« 上一篇： 利用angular自己创建服务

indexDB是使用 ：下一篇 »