gulp文件

//gulpfile.js

'use strict';
/**
 * 1. LESS编译 压缩 合并
 * 2. JS合并 压缩 混淆
 * 3. img复制
 * 4. html压缩
 */

// 在gulpfile中先载入gulp包,因为这个包提供了一些API
var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');

// 1. LESS编译 压缩 --合并没有必要,一般预处理CSS都可以导包
gulp.task('style', function() {
  // 这里是在执行style任务时自动执行的
  gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// 2. JS合并 压缩混淆
gulp.task('script', function() {
  gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// 3. 图片复制
gulp.task('image', function() {
  gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var htmlmin = require('gulp-htmlmin');
// 4. HTML
gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var browserSync = require('browser-sync');
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: ['dist']
    },
  }, function(err, bs) {
    console.log(bs.options.getIn(["urls", "local"]));
  });

  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一款 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、付费专栏及课程。

余额充值