gulp

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.t ('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']);