前期用的是grunt,看了一下gulp。觉得语法比grunt简单,根据需求配置了一下基本满足了自己的需求。
var gulp=require('gulp'),
less=require('gulp-less'),
plumber=require('gulp-plumber'),
prefix=require('gulp-autoprefixer'),
notify=require('gulp-notify'),
sftp=require('gulp-sftp'),
concat=require('gulp-concat'),
minifyCSS=require('gulp-minify-css'),
browserSync=require('browser-sync');
var config={
src:'./src/'
}
var src=config.src+'js/';
/* 服务器 */
gulp.task('serve',['less','js-concat'],function(){
browserSync.init({
server: {
baseDir: "./",
directory: true
}
});
gulp.watch('src/less/**/*.less', ['less']);
gulp.watch(['*.html','src/js/**/*.js']).on('change',function(){
browserSync.reload();
gulp.run('js-concat');
});
});
/* less编译 */
gulp.task('less',function(){
gulp.src('./src/less/style.less')
.pipe(plumber())
.pipe(less({
paths: ['./src/less']
}))
.on('error',notify.onError(function (error) {
browserSync.notify('less编译出错啦(︶︿︶)=凸 ,快去命令行查看!!!',10000000);
return {
message: "Error: <%= error.message %>",
title: "less编译出错"
};
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(minifyCSS())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({stream:true}));
});
/* js拼接 */
gulp.task('js-concat',function(){
return gulp.src([src+'base/*.js',src+'plugin/*.js',src+'common/*.js',src+'module/*.js',])
.pipe(concat('bundle.js'))
.pipe(gulp.dest('./js/'));
})
/* 默认任务 */
gulp.task('default',['serve'])