var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require("gulp-uglify"),
gulp_remove_logging = require('gulp-remove-logging'),
cleanCSS = require('gulp-clean-css'),
clean = require('gulp-clean'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('gulp-autoprefixer'),
gutil = require('gulp-util'),
browserSync= require("browser-sync").create(),
reload = browserSync.reload,
babel = require("gulp-babel"),
plumber = require('gulp-plumber'),
cached = require('gulp-cached'),
livereload = require('gulp-livereload'),
gulp.task("html",function(){
return gulp.src('templates/web/**/*.html')
.pipe(cached('html'))
.pipe(livereload())
});
//sass编译
gulp.task("sass", function() {
return gulp.src([
"static_src/css/**/*.scss",
],
{
nodir: true
})
.pipe(plumber())
.pipe(autoprefixer({
browsers: ["last 100 versions"],
cascade: false
}))
.pipe(sass())
// css压缩
.pipe(rename({
suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest("static/css"))
.pipe(reload({
stream: true}))
})
gulp.task('css', function() {
// 1. 找到文件
return gulp.src('static_src/css/**/*.css')
.pipe(cached('css'))
.pipe(plumber())
.pipe(autoprefixer({
browsers: ['last 100 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest('static/css'))
.pipe(livereload())
});
gulp.task('main_scss',function(){
return gulp.src('static_src/main/**/*.scss')
.pipe(cached('main_scss'))
.pipe(plumber())
.pipe(autoprefixer({
browsers: ["last 100 versions"],
cascade: false
}))
.pipe(sass())
// css压缩
.pipe(rename({
suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest("static/main"))
.pipe(reload({
stream: true}))
.pipe(livereload())
})
gulp.task('common_css',function(){
return gulp.src('static_src/common/**/*.css')
.pipe(cached('common_css'))
.pipe(plumber())
.pipe(autoprefixer({
browsers: ['last 100 versions'],
cascade: false
}))
.pipe(rename({
suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest('static/common'))
.pipe(livereload())
})
gulp.task('js',function() {
return gulp.src('static_src/js/**/*.js')
.pipe(cached('js'))
.pipe(plumber())
.pipe(babel({
presets : ['es2015']
}))
.pipe(rename({
suffix: '.min'}))
.pipe(uglify().on('error', function(err){
gutil.log(err);
this.emit('end');
}))
.pipe(gulp.dest('static/js'))
.pipe(livereload())//实时刷新
});
gulp.task('main_js',function(){
return gulp.src('static_src/main/**/*.js')
.pipe(cached('main_js'))
.pipe(plumber())
.pipe(babel({
presets : ['es2015']
}))
.pipe(rename({
suffix: '.min'}))
.pipe(uglify().on('error', function(err){
gutil.log(err);
this.emit('end');
}))
.pipe(gulp.dest('static/main'))
.pipe(livereload())//实时刷新
})
gulp.task('common_js',function(){
return gulp.src('static_src/common/**/*.js')
.pipe(cached('common_js'))
.pipe(plumber())
.pipe(babel({
presets : ['es2015']
}))
.pipe(rename({
suffix: '.min'}))
.pipe(uglify().on('error', function(err){
gutil.log(err);
this.emit('end');
}))
.pipe(gulp.dest('static/common'))
.pipe(livereload())//实时刷新
})
gulp.task('move_lib', function() {
// 1. 找到文件
return gulp.src('static_src/lib/**/*')
.pipe(gulp.dest('static/lib'));
});
gulp.task('ckeditor',function() {
return gulp.src('static_src/ckeditor/ckeditor/plugins/video/**/*')
.pipe(gulp.dest('static/ckeditor/ckeditor/plugins/video'));
});
gulp.task("clean_static", function(){
return gulp.src(['./static/lib/', './static/ckeditor/', './static/css/','./static/main/','./static/common/', './static/js/'])
.pipe(clean());
});
gulp.task('watch',function(){
livereload.listen();
gulp.watch('templates/web/**/*.html',['html'])
gulp.watch('static_src/**/*.scss',['sass']);
gulp.watch('static_src/css/**/*.css',['css']);
gulp.watch('static_src/common/**/*.css',['common_css','main_scss']);
gulp.watch('static_src/main/**/*.css',['main_scss']);
gulp.watch('static_src/js/**/*.js',['js']);
gulp.watch('static_src/common/**/*.js',['common_js']);
gulp.watch('static_src/main/**/*.js',['main_js']);
});
gulp.task('default', ['clean_static', 'watch'], function(done){
gulp.start('html', 'js', 'main_js', 'common_js', 'sass', 'css', 'main_scss', 'common_css', 'move_lib', 'ckeditor');
});
**/html文件要引入下面的js文件/
<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.1.0"></script>
依赖
{
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-remove-strict-mode": "^0.0.2",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.23.6",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-cdn-absolute-path": "^0.0.6",
"gulp-chsi-rev": "^1.1.2",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^3.9.3",
"gulp-minify-html": "^1.0.6",
"gulp-postcss": "^7.0.1",
"gulp-remove-logging": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"gulp-cached": "^1.1.1",
"gulp-livereload": "^4.0.2",
"gulp-plumber": "^1.2.1"
}
}