gulp是自动化的构建工具,处理的常见任务:(4个)
搭建web服务器;优化资源;文件保存时自动重载;适用于处理器;
//gulp创建项目
- mkdir projet;
- cd project;//进入这个项目
- npm init;//自动为你创建package.json文件(储存项目的相关信息)
- npm install gulp --save-dev//局部安装gulp,完成这几步后自动生成node_module文件
gulp有4个属性:src,task,dest,watch
1)gulp.task("task-name",function(){})->调用gulp task-name //创建一个任务
gulp.task("task-name",[,],function(){})->gulp task-name
2)gulp.src()->获取要处理的文件源路径//!移除文件,*任意,.+(scss|sass)匹配.sass和.scss文件
3).pipe(gulp.dest('./dist/css'))
gulp.dest()->作用是将目的地址的基础路径替换成源地址的路径输出
替换-》gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'));
./dist/css/*.css
4).pipe管道函数,办一个文件流入,通过pipe管道输出
5).gulp.watch()->监视文件,就是监视文件的变化,然后运行指定的Tasks或者函数,这个相比Grunt需要使用插件,gulp本身就支持的很好。
自动刷新:
browser sync
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。
npm install browser-sync --save-dev //安装browser sync
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// 静态服务器
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 代理
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "你的域名或IP"
});
});
通过流的方式创建任务流程, 这样就可以在你的任务完成后调用reload
,所有的浏览器将被告知的变化并实时更新. 因为Browsersync只在乎你的CSS在编译完成 finished
后 - 注意: gulp.dest
后调用重载。
livereload为自动刷新插件
gulp.task('watch',function(){
return gulp.watch('index.html',['copy-index']).pipe(connect.reload());//index.html发生变化后执行copy-index任务
//.pipe(connect.reload()是为了配合实时刷新
});
//创建本地服务器运行代码
// npm install gulp-connect --save-dev livereload为自动刷新插件
var connect = require('gulp-connect'); // gulp-connect是开源的,它是一个静态web的服务
gulp.task('server',function(){
connect.server({
root : 'dist',
port: 8080,
livereload : ture //启用实时刷新
})
});
其中root
是服务启动的根目录,换句话说别人通过IP+Port端口访问到你的服务器所访问到文件夹就是root
(这里是'dist'
),port就是端口了,livereload
是一个标志,为true
时gulp会自动检测文件的变化然后自动进行源码构建
在根目录启动命令行,输入gulp server
将启动server。
gulp-useref会将多个文件变成单一文件,并输出到相应目录->npm install gulp-useref
gulp-concat 合并两个js文件
gulp-rename 重命名文件
gulp-uglify压缩js文件->npm install gulp-uglify
gulp-minify-css压缩css-> npm install gulp-if gulp-minify-css --save-dev
gulp-imagemin优化图片->npm install gulp-imagemin --save-dev
其中一部分配置:
var gulp = require('gulp');//告知node去node_modules中查找gulp包,找到后就会赋值给gulp变量
var app={
srcPath:'src/', //开发目录
devPath:'build/', //生产目录
prdPath:'dist/'//发布目录(用于发布)
};
gulp.task('image',function(){ //为事件命名
return gulp.src('images/**/*').pipe(gulp.dest('dist/images'));
// gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));
//同时操作xml下所有的.xml和json文件夹下所有的.json文件
// gulp.src(['xml/*.xml','json/*.json','!json/secret-*.json']).pipe(gulp.dest('dist/data'));
//叹号表示复制是忽略此类文件,即以secret-开头的所有文件
});//将images下的所有东西都复制到dist文件下的images里
//创建任务依赖三个任务
gulp.task('build',['copy-index','images','data'],function(){
console.log('编译成功');
});
//执行build时会先执行后三个任务,执行完成后再执行build本身的任务
gulp.task('watch',function(){
return gulp.watch('index.html',['copy-index']).pipe(connect.reload());//index.html发生变化后执行copy-index任务
//.pipe(connect.reload()是为了配合实时刷新
});
//使用插件 npm install gulp-sass --save-dev ,less同理
var sass = require('gulp-sass');
gulp.task('sass',function(){
return gulp.src('stylesheets/**/*.scss').pipe(sass()).pipe(gulp.dest('dist/css'));
//将sass编译成css文件
});
//创建本地服务器运行代码
// npm install gulp-connect --save-dev livereload为自动刷新插件
var connect = require('gulp-connect'); // gulp-connect是开源的,它是一个静态web的服务
gulp.task('server',function(){
connect.server({
root : 'dist',
port: 8000,
livereload : ture //启用实时刷新
})
});