gulp3.9.1-全自动配置,即刻拥有

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"
  }
}

你可能感兴趣的:(js,gulp)