npm install gulp -g
2本地生成一个package.json的文件
npm init
3本地项目中需要安装gulp(项目中需要require)
npm install gulp --save-dev
4本地下载各个需要的模块,列如:gulp-cssnano,gulp-rename等
npm install gulp-cssnano --save-dev
npm insall gulp-rename --save-dev
5package.js文件中导入模块:require(模块名)
var gulp = require("gulp"); //引入gulp
var cssnano = require("gulp-cssnano"); //引入css压缩模块
var rename = require("gulp-rename"); //引入修改名字模块
var uglify = require("gulp-uglify"); //引入压缩js模块
var concat = require("gulp-concat"); //引入合并文件模块
var imagemin = require("gulp-imagemin"); //引入压缩图片模块
var bs = require("browser-sync").create(); //引入自动刷新浏览器模块
//task创建要执行的任务,第一个参数是任务的名字,第二个参数是个函数,要执行的任务
gulp.task("tick",function () {
console.log("ksfkf");
});
//压缩css文件任务
gulp.task("css",function () {
gulp.src("./css/*.css").pipe(cssnano()).pipe(gulp.dest("./dist/style"));
});
//修改名字的任务
gulp.task("re_css",function () {
gulp.src("./css/*.css").pipe(cssnano()).pipe(rename("index.min.css")).pipe(gulp.dest("./dist/style"));
});
//压缩js文件
gulp.task("script",function () {
gulp.src("./js/*.js").pipe(uglify()).pipe(rename({suffix:".min"})).pipe(gulp.dest("./dist/script"));
});
//合并文件
gulp.task("cendor",function () {
gulp.src(["./js/but.js","./js/nav.js"]).pipe(concat("index.min.js")).pipe(uglify()).pipe(gulp.dest("./dist/script"));
});
//压缩图片
gulp.task("img",function () {
gulp.src("./images/*.*").pipe(imagemin()).pipe(gulp.dest("./dist/images"));
});
//监听事件
gulp.task("watch",function () {
gulp.watch("./css/*.css",["css"])
});
//自动刷新浏览器时间
gulp.task("bs",function () {
bs.init({
"server":{
"baseDir":"./"
}
});
});
gulp.task("bs_css",function () {
gulp.src("./css/*.css").pipe(cssnano()).pipe(gulp.dest("./dist/style")).pipe(bs.stream());
});
gulp.task("bs_watch",function () {
gulp.watch("./css/*.css",["bs_css"])
});
gulp.task("defult",["bs","bs_watch"]);