gulp安装
1.在系统安装(全局安装)：
npm install gulp-cli -g
2.在文件中安装：
npm init -y 安装后出现json文件
npm install -save-dev gulp gulp-util 安装后出现node_modules文件夹
3.创建gulpfile.js文件并写入：
var gulp = require('gulp');
gulp.task('default', function() {
//写自己的代码
});
输入gulp命令看是否安装成功
gulp使用
html文件压缩
命令：npm install --save-dev gulp-minify-html
样例：var gulp = require('gulp'),
minifyHtml = require("gulp-minify-html");
gulp.task('myminifyhtml', function () {
gulp.src('*.html') //要压缩的html文件
.pipe(minifyHtml()) //调用压缩
.pipe(gulp.dest('dist/html'))//压缩到哪
.pipe(connect.reload());//时时监听
});
gulp.task('default',['myminifyhtml']);
css文件压缩
命令：npm install gulp-minify-css --save-dev
npm install --save-devgulp-clean-oss
样例：var gulp = require('gulp'),
cssmin = require('gulp-minify-css');
gulp.task('myminifycss', function () {
gulp.src('css/*.css') //要压缩的css文件
.pipe(cssmin()) //调用压缩
.pipe(gulp.dest('dist/css')) //压缩到哪
.pipe(connect.reload()); //时时监听
});
gulp.task('default',['myminifycss']);
js文件合并压缩插件
命令：npm install --save-dev gulp-uglify gulp-concat
样例：var gulp = require('gulp'),
uglify=require('gulp-uglify'),
concat=require('gulp-concat');
gulp.task('myjs', function(){
gulp.src('js/*.js') //要合并压缩的js文件
.pipe(uglify()) //调用压缩
.pipe(concat('all.js')) //合并所有js文件
.pipe(gulp.dest('dist/myjs')) //压缩到哪
.pipe(connect.reload()); //时时监听
});
gulp.task('default',['myjs']);
自动监听自动刷新
命令：npm install --save-dev gulp-livereload
npm install --save-dev gulp-connect
样例：connect = require('gulp-connect');
livereload = require('gulp-livereload');
//自动监听
gulp.task('watch', function () {
gulp.watch('*.html', ['myminifyhtml']);
gulp.watch('js/*.js', ['myjs']);
gulp.watch('css/*.css', ['myminifycss']);
});
//设置刷新服务
gulp.task('connect', function () {
connect.server({
host: 'localhost', //地址，可不写，不写的话，默认localhost
port: 8020, //端口号，可不写，默认8000
root: './', //当前项目主目录
livereload: true //自动刷新
});
});
gulp.task('default',['watch','connect']);
具体代码参考以下
//定义依赖项和插件
var gulp=require('gulp'),
gutil=require('gulp-util'),
uglify=require('gulp-uglify'),
cssmin = require('gulp-minify-css'),
minifyHtml = require("gulp-minify-html"),
rename = require('gulp-rename'),
connect = require('gulp-connect');
livereload = require('gulp-livereload');
//定义名为"js"的任务
gulp.task('uglifyjs', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
gulp.task('testCssmin', function () {
gulp.src('css/index1.css')
.pipe(cssmin())
.pipe(rename('aaaa.css'))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
});
gulp.task('minify-html', function () {
gulp.src('*.html') //要压缩的html文件
.pipe(minifyHtml()) //压缩
.pipe(gulp.dest('dist/html'))
.pipe(connect.reload());
});
//自动监听
gulp.task('watch', function () {
gulp.watch('*.html', ['minify-html']);
gulp.watch('js/*.js', ['uglifyjs']);
gulp.watch('css/*.css', ['testCssmin']);
});
//设置刷新服务
gulp.task('connect', function () {
connect.server({
host: 'localhost', //地址，可不写，不写的话，默认localhost
port: 8020, //端口号，可不写，默认8000
root: './', //当前项目主目录
livereload: true //自动刷新
});
});
//定义默认任务
gulp.task('default', ['uglifyjs','testCssmin','minify-html','watch','connect']);
