初识

安装

p2p 安装到开发依赖

安装好后的package.json文件

{
  "name": "p2p",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.9.4",
    "gulp-imagemin": "^4.1.0",
    "gulp-less": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.1"
  }
}

gulpfile.js

• 引入browser-sync

var gulp = require('gulp');
// 3.X版本
//引入第三方模块
var less=require("gulp-less");
var sass = require('gulp-sass');
var path=require("path");
var cleanCSS=require("gulp-clean-css");
var rename=require("gulp-rename");
var uglify=require("gulp-uglify");
var browserSync = require('browser-sync');

//配置less编译任务
gulp.task("less",function () {
    gulp.src("assets/styles/*.less") //源目录
    .pipe(less({
        paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest("dist/css")); //输出目录
});

//配置sass编译任务
gulp.task("sass",function () {
    gulp.src("assets/styles/*.scss") //源目录
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest("dist/css")); //输出目录
});

//配置压缩css的任务
gulp.task("minCss",function () {
    gulp.src("dist/css/*.css") //源目录
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename({
        suffix:".min" //重命名加min后缀
    }))
    .pipe(gulp.dest("dist/css/min")); //输出目录
});

//配置js压缩的任务
gulp.task("uglifyJs",function () {
    gulp.src("src/*.js") //源目录
    .pipe(uglify()) //执行压缩
    .pipe(rename({
        suffix: ".min"   //执行重命名
    })) 
    .pipe(gulp.dest("dist/js")); //输出目录
});

//开启观察者watch
gulp.task("default",function () {
    
    gulp.watch("assets/styles/*.less",["less"]); //观察less变化执行less编译任务
    // gulp.watch("assets/styles/*.scss",["sass"]); //观察sass变化执行sass编译任务
    // gulp.watch("dist/css/*.css",["minCss"]); //观察css变化执行css压缩任务
    // gulp.watch("src/*.js",["uglifyJs"]); //观察js变化执行js压缩任务
    
     //架设静态服务器
    browserSync.init({
        files:['**/*.css','**/*.html','**/*.js'],   //监听指定文件类型，自动刷新浏览器
        server:{
            baseDir:'./', // 设置服务器的根目录
            index:'index.html' // 指定默认打开的文件
        },
        port:8888 // 指定访问服务器的端口号
    });
    
    

});