//在这里面写gulp的配置
// 基于task(任务)的
// 第一步,需要引入用到的插件
// 在引入插件的时候,require里面不需要放路径名字,只需要放上插件名
var gulp = require('gulp'); var concat = require('gulp-concat'); var clean = require('gulp-clean-css'); var rename = require('gulp-rename');
//压缩js var uglify = require('gulp-uglify');
//混淆js var obfuscate = require('gulp-obfuscate');
//开启服务器环境 var connect = require('gulp-connect');
//压缩图片 var imageMin = require('gulp-imagemin');
//postcss var postCss = require('gulp-postcss'); var autopre = require('gulp-autoprefixer');
// 注意,当你使用require来引入外部文件的时候,如果是引入的node_modules文件夹里面的文件,就不需要添加任何路径 // 如果你引入的是自定义的文件,一定要加上路径,如果是当前目录的,一定要加上./
// 第二步,就可以写相应的任务 //gulp.taks(任务名, function(){
//})
// gulp.src(放上的是源文件的路径)
//合并,压缩css gulp.task('MiniCss', function() { gulp.src('css/*.css')
//pipe管道的意思 指的是当前要做什么事情
.pipe(concat('app.css'))
.pipe(autopre({
browsers: ['> 5%', 'Firefox > 20', 'ie 6-8', '> 5% in US']
}))
.pipe(clean())
.pipe(rename({
extname: '.min.css'
}))
.pipe(gulp.dest('dist/'))
复制代码
});
//合并、压缩js的任务
gulp.task('MiniJs', function() {
gulp.src('js/*.js')
.pipe(concat('app.js'))
.pipe(obfuscate({ replaceMethod: obfuscate.ZALGO }))
.pipe(uglify({
mangle: {
toplevel: true
}
}))
.pipe(rename({
extname: '.min.js'
}))
.pipe(gulp.dest('dist/'))
复制代码
});
// 用来设置开启服务器环境的任务 gulp.task('Server', function() { connect.server({ port: 4000, // 更改端口号的 直接放上你要的端口号 //host: '88.88.88.88' //设置访问地址的 //https: true livereload: true }); });
//用来监听文件的更改 gulp.task('watchFile', ['MiniCss', 'MiniJs'], function() {
gulp.watch('js/*.js', ['MiniJs']);
gulp.watch('css/*.css', ['MiniCss'])
复制代码
});
//压缩图片的任务 gulp.task('MiniImg', function() { gulp.src('img/*') .pipe(imageMin({ optimizationLevel: 1 })) .pipe(gulp.dest('dist/img/')) })
//在Gulp里面 有一个默认的任务名 default // 就是先执行中括号里面的任务,再执行default
gulp.task('default', ['Server', 'watchFile', 'MiniImg'])