标签:depend when strong 刷新 代码 end oba 前端 on()
npm install --global gulp
npm install --save-dev gulp
gulpfile.js
的文件:var gulp = require(‘gulp‘);
gulp.task(‘default‘, function() {
// 将你的默认的任务代码放在这
});
gulp
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
想要单独执行特定的任务(task),请输入 gulp <task> <othertask>
。
正题
想想看,在进行前前端开发的时候,如果js或css或其他文件有任何改动,网页就会自动加载,不用自己手动去按Ctrl+R
或者什么F5,是不是很爽。今天给大家推荐的,就是这样一个插件:gulp-connect,它不仅能够自动启动一个web服务器,还能实现上述的热加载的功能
前提是你已经安装好nodejs
,gulp
,npm
,并对他们的使用有基本的了解。且项目下已经初始化好了gulpfile.js
和package.js
文件了。
如果这些你都还不知道,那就去了解一下吧。
安装命令:
npm install --save-dev gulp-connect
var gulp = require(‘gulp‘),
connect = require(‘gulp-connect‘);
gulp.task(‘connect‘, function() {
connect.server();
});
gulp.task(‘default‘, [‘connect‘]);
监控根目录下的app
目录下所有的html文件情况,如有变动,则自动刷新,如果需要监控less,sass,css,js等等,请自动依葫芦画瓢啦!
var gulp = require(‘gulp‘), connect = require(‘gulp-connect‘); gulp.task(‘connect‘, function() { connect.server({ root: ‘app‘, livereload: true }); }); gulp.task(‘html‘, function () { gulp.src(‘./app/*.html‘) .pipe(connect.reload()); }); gulp.task(‘watch‘, function () { gulp.watch([‘./app/*.html‘], [‘html‘]); }); gulp.task(‘default‘, [‘connect‘, ‘watch‘]);
gulp.task(‘jenkins-tests‘, function() { connect.server({ port: 8888 }); // run some headless tests with phantomjs // when process exits: //balabala可以做好多事情 connect.serverClose(); });
监视当前目录中所有html,css,js文件
var gulp = require(‘gulp‘), connect = require(‘gulp-connect‘); gulp.task(‘connect‘, function() { connect.server({ root: ‘./‘, livereload: true }); }); gulp.task(‘html‘, function () { gulp.src(‘./*.html‘) .pipe(connect.reload()); }); gulp.task(‘css‘, function () { gulp.src(‘./*.css‘) .pipe(connect.reload()); }); gulp.task(‘js‘, function () { gulp.src(‘./*.js‘) .pipe(connect.reload()); }); gulp.task(‘watch‘, function () { gulp.watch([‘./*.html‘,‘./*.css‘,‘./*.js‘], [‘html‘,‘css‘,‘js‘]); }); gulp.task(‘default‘, [‘connect‘,‘watch‘]);
标签:depend when strong 刷新 代码 end oba 前端 on()
原文地址:http://www.cnblogs.com/yang-C-J/p/7490090.html