对于以下其中的src属性,是相对于gulpfile.js的路径!
gulp常用插件:
/**
* npm 安装命令 npm install name --save-dev
* gulp-concat 合并文件
* browser-sync 自动刷新,静态服务
* gulp-load-plugins 自动加载gulp插件
* gulp-autoprefixer 设置浏览器版本自动处理浏览器前缀
* gulp-uglify 压缩js文件
* gulp-csso 压缩优化css
* gulp-sass 编译sass
* gulp-sourcemaps 生层map文件
* gulp-clean 删除文件
* gulp-sequence 让任务顺序执行【这个插件没有使用】
* gulp-htmlmin 压缩页面的html
* gulp-jshint 校验js语法 依赖 jshint
压缩CSS
// 压缩css
gulp.task('minCss', function(){
return gulp.src('./development/css/frame.css')
.pipe($.csso())
.pipe(gulp.dest('./production/'));
});
检查,压缩,合并JS
// 检查、压缩、合并js
gulp.task('concatJs', ['cleanJsFile'], function(){
return gulp.src([config.dev.scriptsPath + '**/*.js', config.dev.directivesPath + '**/*.js', config.dev.viewPath + '**/*.js'])
.pipe($.sourcemaps.init())
.pipe($.jshint.reporter('default'))
.pipe($.concat('appCode.js'))
.pipe($.uglify({
mangle: true, // 是否修改变量名,默认为 true
compress: true // 是否完全压缩,默认为 true
}))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist.scriptsPath))
.pipe(browserSync.reload({stream:true}));
});
文件合并
// 文件合并
gulp.task('fileConcat', function(){
return gulp.src( './development/css/test.css' )
.pipe($.concat('all.css'))
.pipe(gulp.dest('./production/'));
});
删除目录
//删除目录
gulp.task('delFile', function(){
del('../' + productionFileName);
console.log("文件删除执行完毕!");
});
//删除目录
gulp.task('clean', function(){
return gulp.src(config.dist.path)
.pipe($.clean());
});
压缩html
/** 使用gulp-htmlmin压缩html,可以压缩页面javascript、css,* 去除页面空格、注释,删除多余属性等操作*/
var htmlMinOptions = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyjs: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.task('copyDirectivesDir', ['cleanDirectivesDir'], function(){
return gulp.src(config.dev.directivesPath + '**/*.html')
.pipe($.htmlmin(htmlMinOptions))
.pipe(gulp.dest(config.dist.directivesPath))
.pipe(browserSync.reload({stream:true}));
});