前端练习项目gulp配置
记录下学习过程使用gulp的一些经验
我的文件夹目录是这样的
|-- project |-- child-project |-- src |-- html |-- less |-- js |-- img |-- dist |-- html |-- css |-- js |-- img
功能需求如下
- 在
project
任意子目录下修改less
文件后自动编译在对应项目文件夹的css
文件夹下 - 在
project
任意子目录下修改html、js、less文件后都自动刷新浏览器
2017-12-14
- 增加了压缩文件的需求,需要将src中的js文件/img/css文件进行压缩,压缩至dist文件夹下
- 增加了检查js代码
实际配置
//编译与刷新浏览器 //导入工具包 var gulp = require('gulp'), less = require('gulp-less'), browserSync = require('browser-sync').create(), browserReload = browserSync.reload, rename = require('gulp-rename'); //定义less编译任务 gulp.task('lessCompile', function() { gulp.src('./project/**/*.less') //该任务针对的文件 .pipe(less())//该任务调用的模块 .pipe(rename(function(path) { return path.dirname = path.dirname.replace('less', 'css'); })) .pipe(gulp.dest('./project')) .pipe(browserReload({stream: true})); }); //监听 本地 less/html/js 文件 gulp.task('serve', function(){ //监听本地文件 browserSync.init({ server: { baseDir: "./project", directory: true } }); //监听less gulp.watch("./project/**/*.less", ['lessCompile']); //监听html gulp.watch("./project/**/*.html").on('change', browserReload); //监听js gulp.watch("./project/**/*.js").on('change', browserReload); }); //定义默认任务 gulp.task('default', ['serve']);
//代码检查和压缩 gulp.task('jsHint', function() { gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//检查的文件,忽略dist中的js文件 .pipe(jshint(jshintConfig))//检查 .pipe(jshint.reporter('default')); // 输出检查结果 }); //定义js压缩任务(css与img同此,更换插件即可) gulp.task('jsmin', function() { gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//压缩的文件,忽略dist中的js文件 .pipe(uglify())//压缩 //.pipe(rename({suffix:'.min'}))//增加min后缀 .pipe(rename(function(path) { return path.dirname = path.dirname.replace('src', 'dist'); }))//压缩至dist文件夹 .pipe(gulp.dest('./project')); });
参考学习
http://www.cnblogs.com/2050/p...,src与dest的路径学习参考此文http://www.ydcss.com/archives/18 gulp的详细入门指南
http://blog.csdn.net/u0137205... jshint的参数的配置
相关推荐
星辰的笔记 2020-07-04
zhongweinan 2020-06-10
jiangfulai 2020-04-18
hlihaihong 2020-01-13
kaosini 2020-01-12
kaosini 2020-01-12
FranksTD 2019-12-19
hlihaihong 2019-12-15
hlihaihong 2019-12-14
我有一只小松鼠 2019-12-14
FranksTD 2019-12-13
SeekerTime 2019-11-17
yuetingzhuying 2015-10-17
福叔 2019-09-06
kaosini 2019-09-06
RainyX 2019-07-01
hlihaihong 2019-07-01
idnochinese 2019-07-01
UndefineOrNull 2019-07-01