npm最基本安装
gulp验证打包压缩加密编译(常用)
也是在gulpfile.js里操作
//头部引用: require里输入的是你指令安装插件的名字,可在node_modules里看到
var gulp=require("gulp");
//引入打包插件
var concat=require("gulp-concat");
//导入编译sass插件
var sass=require("gulp-sass");
//导入验证css插件
var minify=require("gulp-minify-css");
//导入观察者browser-sync
var browsersync=require("browser-sync").create();
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口),在deps[]中添加引用任务的任务名
gulp.task("default",["compresCss"],function(){
console.log("先走compressCss再走Default哦");
console.log("this is default.js");
//创建观察者
browsersync.init({
//若同级目录下有index.html baseDir可以写成例子这样，也可以自己指定到对应的html
server:{baseDir:"./"}
});
//开始观察 观察对象为scss,当scss发生变化时,调用编译SASS方法,做到同步编译更新到网页显示
gulp.watch("./script/style/one.scss",["compresCss"]);
})
//编译SASS方法
gulp.task("compresCss",function(){
//需要编译哪个文件下的scss文件
return gulp.src("./script/**/*.scss").
//先验证
pipe(minify()).
//开始编译
pipe(sass()).
//编译后的文件名
pipe(concat("bianyicss.css")).
//编译后文件放在哪个文件夹下(位置)
pipe(gulp.dest("./script")).
//自动同步更新后的文件
pipe(browsersync.stream())
})