zoukankan      html  css  js  c++  java
  • gulp基本设置

    var gulp = require('gulp');		
    var clean = require('gulp-clean');
    var concat = require('gulp-concat');
    //var jade = require('gulp-jade');	//暂时不需要
    //var sass = require('gulp-sass');	//可以为sass、less、scss
    
    var util = require('gulp-util');		//输入提示,日志
    var notify = require('gulp-notify');	//系统提示
    
    
    var browserSync = require('browser-sync');//	浏览器异步处理
    var reload = browserSync.reload;
    
    
    var runSequence = require('run-sequence');	//执行顺序
    
    var uglify = require('gulp-uglify');	//专门压缩js
    var cleanCSS = require('gulp-clean-css');	//css压缩
    var htmlmin = require('gulp-htmlmin');	//html压缩
    
    //var assetRev = require('gulp-asset-rev');	//加版本号
    
    
    var rev = require('gulp-rev');		//版本管理
    var revCollector = require('gulp-rev-collector');	//版本管理
    
    
    
    
    var src = {
    	html:['src/html/*.html'],
    	css:['src/css/*.css'],
    	js:['src/js/*.js']
    }
    
    
    var build = {
    	base:'dist/',
    	views:'dist/views/',
    	css:'dist/css/',
    	js:'dist/js/'
    }
    
    gulp.task('build:clean',function(){
    	
    	return gulp.src(build.base,{read:false})
    	.pipe(clean({force:true}))
    	.pipe(notify(({message:'清除---目录结构'})))
    	
    })
    
    
    gulp.task('build:views',function(){
    	
    	return gulp.src(src.html)
    	.pipe(htmlmin({collapseWhitespace: true,minifyJS:true,minifyCSS:true}))	//minifyJS----压缩页面中js
    	.pipe(gulp.dest(build.base))
    	.pipe(browserSync.reload({stream:true}))
    	.pipe(notify({message:'html---编译完成'}))
    	
    })
    
    
    gulp.task('build:css',function(){
    	
    	return gulp.src(src.css)
    	.pipe(concat('app.css'))
    	.pipe(cleanCSS({debug: true}, function(details) {
          console.log(details.name + ': ' + details.stats.originalSize);
          console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
    	.pipe(gulp.dest(build.css))
    	.pipe(browserSync.reload({stream:true}))
    	.pipe(notify({message:'css---编译完成'}))
    	
    })
    
    /* 
    return gulp.src('styles/*.css')
        .pipe(cleanCSS({debug: true}, function(details) {
          console.log(details.name + ': ' + details.stats.originalSize);
          console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
      .pipe(gulp.dest('dist')); */
    
    
    gulp.task('build:js',function(){
    	
    	return gulp.src(src.js)
    	.pipe(concat('app.js'))
    	.pipe(uglify())
    	.pipe(gulp.dest(build.js))
    	.pipe(browserSync.reload({stream:true}))
    	.pipe(notify({message:'js编译完成'}))
    	
    })
    
    gulp.task('build:app',['build:css','build:js','build:views'])
    
    
    gulp.task('build',function(){
    	
    	runSequence('build:clean',['build:app'])
    	
    })
    
    gulp.task('bs:sync',function(){
    	
    	browserSync({
    		
    		notify:false,
    		port:3006,
    		server:{
    			baseDir:build.base
    		}
    		
    	})
    	
    })
    
    
    
    gulp.task('watch',function(){
    	
    	gulp.watch(src.html,['build:views']),
    	gulp.watch(src.js,['build:js']),
    	gulp.watch(src.css,['build:css'])
    	
    })
    /*
    做同步到浏览器:再编译之后自动刷新浏览器
    
    */
     
    
    
    //--------------------------gulp执行----------------------------
    gulp.task('default',function(){
    	
    	//下面两种运行方式都可以
    	gulp.start('build','watch','bs:sync')
    	//runSequence('build','bs:sync','watch')
    	
    })
    
    
    
    
    
    
    //------------------------------------------------------
    
    gulp.task('help',function(){
    	
    	console.log('build 			创建')
    	console.log('prod-----		生产')
    	
    	
    })
    
    
    /*function log(msg){
    	util.log(util.colors.blue(msg))
    }
    function handleError(err){
    	
    	log(err.toString());
    	this.emit('end');
    	
    }
    */
    

      package.json包

    {
      "name": "my-gulp",
      "version": "1.0.0",
      "description": "demo",
      "dependencies": {
        "express": "3.x",
        "gulp-rev-collector": "^1.2.2"
      },
      "devDependencies": {
    	"browser-sync": "^2.12.3",
        "gulp-asset-rev": "0.0.15",
        "gulp-clean": "^0.3.2",
        "gulp-clean-css": "^3.8.0",
        "gulp-concat": "^2.6.0",
        "gulp-htmlmin": "^3.0.0",
        "gulp-mini-css": "^0.0.3",
        "gulp-notify": "^3.0.0",
        "gulp-requirejs-optimize": "^0.3.2",
        "gulp-rev": "^8.0.0",
        "gulp-uglify": "^1.5.3",
        "run-sequence": "^2.1.0"
      },
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "chua",
      "license": "ISC"
    }
    

      

  • 相关阅读:
    简例 一次执行多条mysql insert语句
    javax/javaee-api/ Maven依赖
    关闭页面前提示或保存数据
    SpringMVC的controller方法上若需要参数 如User
    方正飞越 A600硬改BIOS激活win7的工具与方法。
    Win7下IE11点击无反应的解决方法
    WinXP局域网共享设置
    使用VHD,让Win XP和 Win2003 运行在内存中
    dd if=/dev/zero of=的含义是什么?Linux 下的dd命令使用详解
    win8.1点击“更改电脑设置”无反应(闪退)
  • 原文地址:https://www.cnblogs.com/YKSlu/p/7545135.html
Copyright © 2011-2022 走看看