gulp打包的gulpfile.js，自用~~

//引包

vargulp=require("gulp")

//压缩js

varuglify=require("gulp-uglify")

//合并js

varconcat=require("gulp-concat")

//压缩CSS

varcssnano=require("gulp-cssnano")

//less转css

varless=require("gulp-less")

//压缩html

varhtmlmin=require("gulp-htmlmin")

//浏览器同步

varbrowserSync=require("browser-sync").create();

//刷新浏览器的方法

varreload = browserSync.reload;

//创建任务（压缩js） 命令gulp js

gulp.task("js",function() {

gulp

//参数：压缩文件路径

// .src('./src/js/index.js') // 通过src方法找到要压缩的js文件

//参数是一个数组，数组中每一项都是一个文件路径

// .src(['./src/js/index.js', './src/js/a.js'])

// *.js表示所有以.js为后缀的文件

.src("./src/js/*.js")

//合并js文件 ，需要指定合并后的文件名称

.pipe(concat("all.min.js"))

//压缩js

.pipe(uglify())

//输出（写文件）

.pipe(gulp.dest(".dist/js"))//将压缩的文件，保存到当前目录中的dist文件夹中

//当前文件发生变化以后，自动刷新浏览器

.pipe(reload({stream:true}));

})

//合并并且压缩css 命令gulp css

gulp.task("css",function() {

gulp

.src("./src/css/*.css")

.pipe(concat("all.min.css"))

.pipe(cssnano())

.pipe(gulp.dest(".dist/css"))

.pipe(reload({stream:true}))

})

// 将less转化为css 命令gulp less

gulp.task("less",function() {

gulp

.src("./src/css/test.less")

.pipe(less())

.pipe(cssnano())

.pipe(gulp.dest(".dist/css"))

.pipe(reload({stream:true}));

})

//压缩html页面 命令gulp html

gulp.task("html",function() {

gulp

.src("./src/index.html")

.pipe(htmlmin({

collapseWhitespace:true,

minifyCss:true,

minifyJs:true,

removeComments:true

}))

.pipe(gulp.dest(".dist"))

.pipe(reload({stream:true}));

})

//拷贝图片 命令gulp img

gulp.task("img",function() {

gulp

.src("./src/images/*.*")

.pipe(gulp.dest(".dist/images"))

.pipe(reload({stream:true}));

})

//静态服务器 命令gulp

gulp.task("bs",function() {

browserSync.init({

server:{

//将 dist 目录作为根目录

baseDir:".dist"

}

});

});

/*

监视文件变化

我们需要写一个任务来监视文件的 变化，当监视到文件内容发生变化以后

执行相应的任务

比如： 修改 index.js 文件，那就需要重新执行js任务

*/

gulp.task("watch",function() {

//监视文件变化

//第一个参数：表示要监视的文件路径

//第二个参数：表示监视到这个文件发生变化后，要执行的任务

gulp.watch("./src/js/*.js",["js"])

gulp.watch("./src/css/*.css",["css"])

gulp.watch("./src/css/less/*.less",["less"])

gulp.watch("./src/index.html",["html"])

})

/*

创建一个默认任务，用来执行其他所有的任务

gulp default default是gulp的默认任务，default可以省略gulp

*/

gulp.task("default",["js","css","less","html","img","bs","watch"],function() {

console.log("gulp任务执行中");

})

怎么执行js文件？

在cmd中运行 ,首先安装一个工具：npm install gulp-cli，

//启用静态服务器

gulp.task('default',['jsmin','imagemin','htmlmin','cssmin'],function() {

browserSync.init({

server:{

//将dist目录作为根目录

baseDir:"./"

}

});

gulp.watch(["src/js/*.js","src/views/**/*.js","src/css/*.css","src/*.html","src/**/*.html"],["jsmin","cssmin","htmlmin","imagemin"])

});