您的位置:首页 > 其它

自动化构建工具--gulp中gulpfile的基础配置

2017-03-24 17:27 295 查看
var gulp = require('gulp')
less = require('gulp-less')
//编译后压缩css
//先安装压缩的依赖:npm install gulp-minify-css --save-dev
//cssmin = require('gulp-minify-css');

//浏览器样式自动加载刷新配置1
//npm install gulp-livereload --save-dev
//命令:livereload = require('gulp-livereload');

//键js编译到同一个文件  配置1
//命令:npm install gulp-concat --save-dev
concat = require('gulp-concat')

//压缩js 配置1
//npm install gulp-uglify --save-dev
jsmin = require('gulp-uglify');

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

//将less编译成css
gulp.src('../dev/less/app.less')
.pipe(less())
//压缩css
//.pipe(cssmin())
.pipe(gulp.dest('../app/css'))
//浏览器自动加载样式配置2
//.pipe(livereload());

//生成js
gulp.src('../dev/js/**/*.js')
//键js编译到同一个文件  配置2
.pipe(concat('app.js'))

//压缩js 配置2
.pipe(jsmin({
managle:true,//类型:Boolean 默认:true 是否修改变量名
compress:true,//类型:Boolean 默认:true 是否完全压缩
preserveComments:'all' //保留所有注释
}))
.pipe(gulp.dest('../app/js'));

//生成html

gulp.src('../dev/html/**/*.html')
.pipe(gulp.dest('../app/html'));

});

gulp.task('default',['devLess']);

//监听devLess编译命令的less发生改变的时候,调用devLess任务

gulp.task('watch1',function(){
//浏览器自动加载样式配置3
//livereload.listen();
gulp.watch('../dev/less/app.less',['devLess']);

})

gulp.task('watch2',function(){
gulp.watch('../dev/js/**/*.js',function(event){
console.log("js出错啦,path is"+event.path+"type is"+event.type);
});

})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: