1.压缩js命令
npm install gulp-uglify 或者 cnpm install gulp-uglify
2.压缩css命令
npm install gulp-minify-css 或者 cnpm install gulp-minify-css
3.压缩img命令
npm install gulp-imagemin 或者 cnpm install gulp-imagemin
4.编译less文件
命令:npm install gulp-less 或者 cnpm install gulp-less
5、自动刷新
npm install gulp-connect 或者 npm install gulp-connect
6、编写gulpfile.js文件
//获取gulp var gulp = require('gulp') connect = require('gulp-connect'); //获取uglify模块(用于压缩js) var uglify = require('gulp-uglify') //获取minify-css模块(用于压缩css) var minifyCss = require('gulp-minify-css') //获取gulp-imagemin模块(用于压缩图片) var imagemin = require('gulp-imagemin') //获取gulp-less模块 var less = require("gulp-less") //压缩css文件 //在命令行使用gulp css启动此任务 gulp.task('css',function(){ //1.找到文件 gulp.src('views/css/*.css') //2.压缩文件 .pipe(minifyCss()) //3.另存为压缩文件 .pipe(gulp.dest('views/dist1/css')) }) //在命令行使用gulp script启动此任务 gulp.task('script',function(){ //1.找到文件 gulp.src('views/js/*.js') //2.压缩文件 .pipe(uglify()) //另存压缩后的文件 .pipe(gulp.dest('views/dist1/js')) }) //压缩图片任务 //在命令输入gulp images启动此任务 gulp.task('images',function(){ //1.找到图片gulp gulp.src('views/images/*.*') //2.压缩图片 .pipe(imagemin({ progressive:true })) //3.另存图片 .pipe(gulp.dest('views/dist1/images')) }); //编译less //在命令行输入gulp less启动此任务 gulp.task('less',function(){ //1.找到less文件 gulp.src('views/less/**.less') //2.编译为css .pipe(less()) //3.另存为css .pipe(gulp.dest('views/dist1/css1')) }) //在命令使用gulp auto启动此文件 gulp.task('auto',function(){ //监听文件修改,当文件被修改则执行css任务 gulp.watch('views/css/*.css',['css']) }); //在命令行使用gulp auto启动此任务 gulp.task('auto',function(){ //监听文件修改,当文件被修改则执行script任务 gulp.watch('views/js/*.js',['script']) }) //在命令使用gulp auto启动此任务 gulp.task('auto',function(){ //监听文件修改,当文件被修改则执行images任务 gulp.watch('views/images/*.*',['images']) }); //在命令行gulp auto启动此任务 gulp.task('auto',function(){ //监听文件修改,当文件修改则执行less任务 gulp.watch('views/less/**.less',['less']) }) //自动刷新 gulp.task('connect',function(){ connect.server({ port:3000, livereload:true }); }); //找到文件、刷新 gulp.task('html',function(){ gulp.src('./views/*.html') .pipe(connect.reload()); }); //监听修改 gulp.task('watch',function(){ gulp.watch('./views/*.css',['html']); gulp.watch('./views/*.js',['html']); gulp.watch('./views/*.html',['html']); }); //使用gulp.task('default')定义默认任务 //在命令行使用gulp启动script,css,images任务和auto任务,connect,watch为自动刷新任务 gulp.task('default',['css','script','images','less','auto','connect','watch'])
7.执行
gulp
ps:如直接复制gulpfile.js文件,需更改项目地址