以后可能会经常用到的gulp插件

首先,由于模块插件都在国外的,所以最好使用淘宝的镜像。
其次,这些模块都是放在项目里面,所以如果进行版本管理的话,要把node_modules文件夹加入.gitignore文件里面。

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用cnpm 代替npm

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint = require('gulp-jshint'); //需求库引入
//压缩css
gulp.task('minifycss', function () {
    return gulp.src('css/*.css')    //需要操作的文件
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(minifycss())   //执行压缩
        .pipe(gulp.dest('dist/css'));   //输出文件夹
});

//压缩、合并js
gulp.task('minifyjs'function() {
        return gulp.src('js/*.js')      //需要操作的文件
            .pipe(concat('main.js'))    //合并所有js到main.js,去掉则不会合并,但压缩
            .pipe(gulp.dest('js'))       //输出到文件夹
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('Js'));  //输出
    });

来自雅虎的图片压缩,可压缩60%,而且品质几乎无损。缺点是只能压缩jpg和png文件。在命令行下运行会报错,但在webstorm下运行则没问题。
安装:cnpm install gulp-smushit --save-dev

var smushit = require('gulp-smushit');
gulp.task('smushit', function () {
    return gulp.src('imgs/*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('dist'));
});

对比
待续

这是一款 Gulp插件,其功能是使源目录和目标目录之间的文件操作保持同步,当检测到源目录的文件有增加/删除/更新时,自动同步到目标目录。Github:https://github.com/kayo5994/gulp-file-sync安装npm install --save-dev gulp-file-sync使用var gulp = require('gulp'),     fileSync = require('gulp-file-sync'); gulp.task('sync', function() {   gulp.watch(['src/*.*'], function() {     fileSync('src', 'dest', {recursive: false});   }); });API 列表fileSync('source directory', 'destination directory', options)'source directory' and 'destination directory'type: String当 'source directory' 目录发生任何文件变化时自动同步到 'destination directory' 目录。options.recursivetype: Booleandefault: true是否对目录递归调用。options.ignoretype: string or array or regex or function排除特定的文件,支持字符串,正则,函数(返回值是被排除的文件),例如:// ignore all .log files fileSync('source directory', 'destination directory', {   ignore: '.log'   }) fileSync('source directory', 'destination directory', {   ignore: [/^\.log$/i, '.cache'] // Exclude all .log and .cache files }) fileSync('source directory', 'destination directory', {   ignore: /^\.log$/i  }) fileSync('source directory', 'destination directory', {   ignore: function(dir, file) {             return file === '.log';           }  })options.addFileCallbacktype: function(fullPathSrc, fullPathDest)default:var gutil = require('gulp-util'); function(fullPathSrc, fullPathDest) {   gutil.log('同步增加文件到 '   fullPathDest); }当 source directory 有新增文件时调用该方法。fullPathSrc - source directory 目录中新增文件的路径。fullPathDest - destination directory 目录中同步新增的文件的路径。options.deleteFileCallbacktype: function(fullPathSrc, fullPathDest)default:var gutil = require('gulp-util'); function(fullPathSrc, fullPathDest) {   gutil.log('同步删除文件 '   fullPathDest); }当 source directory 有文件被删除时调用该方法。fullPathSrc - source directory 目录中被删除文件的路径。fullPathDest - destination directory 目录中同步删除的文件的路径。options.updateFileCallbacktype: function(fullPathSrc, fullPathDest)default:var gutil = require('gulp-util'); function(fullPathSrc, fullPathDest) {   gutil.log('同步修改文件 '   fullPathDest); }当 source directory 有文件被修改时调用该方法。fullPathSrc - source directory 目录中被修改文件的路径。fullPathDest - destination directory 目录中同步修改的文件的路径。options.beforeAddFileCallbacktype: function(fullPathSrc)当 source directory 有新增文件,但并未开始同步时调用该方法。fullPathSrc - source directory 目录中新增文件的路径。options.beforeDeleteFileCallbacktype: function(fullPathSrc)当 source directory 有文件被删除,但并未开始同步删除时调用该方法。fullPathSrc - source directory 目录中被删除文件的路径。options.beforeUpdateFileCallbacktype: function(fullPathSrc)当 source directory 有文件被修改,但并未开始同步修改时调用该方法。fullPathSrc - source directory 目录中被修改文件的路径。 标签:GulpFileSync
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值