利用gulp搭建简单服务器，gulp标准版

Posted 2020-08-16 quan134

var gulp = require(‘gulp‘),
autoprefixer = require(‘gulp-autoprefixer‘), //自动添加css前缀
rename = require(‘gulp-rename‘), //文件重命名
sass = require(‘gulp-sass‘), //sass的编译
minifycss = require(‘gulp-minify-css‘), //压缩css
uglify = require(‘gulp-uglify‘), //压缩js代码
concat = require(‘gulp-concat‘), //合并js文件
rev = require(‘gulp-rev‘), //更改版本名
revCollector = require(‘gulp-rev-collector‘), //rev的插件，用于更改html模版中lib的引用
del = require(‘del‘), //清除文件
livereload = require(‘gulp-livereload‘),
// babel = require(‘gulp-babel‘),//清除文件
jade = require(‘gulp-jade‘), //jade
htmlmin = require("gulp-htmlmin"), //html
connect = require(‘gulp-connect‘), //使用connect启动一个Web服务器
js_pach = [‘app/static/**.js‘, ‘app/static/**/**.js‘, ‘app/template/**.js‘, ‘app/template/**/**.js‘, ‘app/template/**/**.js‘],
//var css_pach = [‘css/ionic_main.css‘,‘css/huodong.css‘,‘css/gouwuche.css‘,‘css/chenggong.css‘];
scss_pach = [‘app/**/**.scss‘, ‘app/**/**/**.scss‘, ‘app/**/**/**/**.scss‘, ‘app/**/**/**/**/**.scss‘],
jade_path = [‘app/template/**.jade‘, ‘app/template/**/**.jade‘, ‘app/template/**/**/**.jade‘, ‘app/template/**/**/**/**.jade‘],
jade2_path = [‘app/static/**.jade‘, ‘app/static/**/**.jade‘, ‘app/static/**/**/**.jade‘],
html_path = [‘app/template/**.html‘, ‘app/template/**/**.html‘, ‘app/template/**/**/**.html‘, ‘app/template/**/**/**/**.html‘],
all_path = js_pach.concat(scss_pach).concat(jade_path).concat(jade2_path).concat(html_path);
gulp.task(‘connect‘, function () {
connect.server({
root: ‘‘,
livereload: true,
port: 8080 //服务器端口
});
});
// gulp.task(‘babel‘, function () {
// return gulp.src(js_pach)
// .pipe(babel({
// compact:false
// }))
// .pipe(concat(‘debug2.js‘))
// .pipe(gulp.dest(‘js‘));
// });

gulp.task(‘jade‘, function () {
return gulp.src(jade_path)
.pipe(jade()).on(‘error‘, function () {
console.log("eroror")
})
.pipe(gulp.dest(‘app/dist/templates‘)).pipe(connect.reload());
})
gulp.task(‘jade2‘, function () {
return gulp.src(jade2_path)
.pipe(jade()).on(‘error‘, function () {
console.log("eroror")
})
.pipe(gulp.dest(‘app/dist‘)).pipe(connect.reload());
});

gulp.task(‘html‘, function () {
return gulp.src(html_path)
.pipe(htmlmin({collapseWhitespace: true,minifyCSS:true,minifyJS:true,removeComments:true,removeEmptyAttributes:true}))
.pipe(gulp.dest(‘app/dist/templates‘)).pipe(connect.reload());
})

gulp.task(‘js‘, [‘cleanjs‘], function () {

return gulp.src(js_pach)
.pipe(concat(‘debug.js‘))
.pipe(gulp.dest(‘app/dist/js‘))
.pipe(concat(‘main.js‘))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(‘app/dist/js‘))
.pipe(rev.manifest())
.pipe(gulp.dest(‘app/dist/js‘))
});

gulp.task(‘cleanjs‘, function (cb) {
return del([‘app/dist/js/main-**.js‘], cb)
});
gulp.task(‘cleancss‘, function (cb) {
return del([‘app/dist/css/main-**.css‘], cb)
});

gulp.task(‘jsrev‘, [‘js‘], function () {
return gulp.src([‘app/dist/js/**.json‘, ‘index.html‘])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest(‘‘)).pipe(connect.reload())
});

gulp.task(‘sassrev‘, [‘sass‘], function () {
return gulp.src([‘app/dist/css/**.json‘, ‘index.html‘])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest(‘‘)).pipe(connect.reload())
});

gulp.task(‘sass‘, [‘cleancss‘], function () {
return gulp.src(scss_pach)
.pipe(sass({
outputStyle: ‘compressed‘
}).on(‘error‘, sass.logError))
.pipe(concat(‘debug.css‘))
.pipe(gulp.dest(‘app/dist/css‘))
.pipe(concat(‘main.css‘))
.pipe(rev())
.pipe(gulp.dest(‘app/dist/css‘))
.pipe(rev.manifest())
.pipe(gulp.dest(‘app/dist/css‘));
});

gulp.task(‘default‘, function () {
gulp.start(‘connect‘, ‘watch‘);
});

//监视文件变化，自动生成到dist文件夹

gulp.task(‘watch‘, function () {
gulp.watch(js_pach, [‘jsrev‘]);
gulp.watch(scss_pach, [‘sassrev‘]);
gulp.watch(jade_path, [‘jade‘]);
gulp.watch(jade2_path, [‘jade2‘]);
gulp.watch(html_path, [‘html‘]);
});

 

npm install --save 即可把所依赖的文件下载到本地