说明:gulp实现前端网页开发任务管理
我使用的编辑器是visual studio Code,并且安装Eslint插件便于本地操作命令行,这里我就不具体介绍编辑器和Eslint,下面详细介绍下gulp系列插件的安装:
C:\Users\Administrator>npm install -g gulp
.....
C:\Users\Administrator>gulp -v
[07:50:45] CLI version 3.9.1
dedao_vue_gulp
├─images
├─index.html
├─gulpfile.js
├─stylus
│ ├─common.styl
D:workspace>dedao_vue_gulp>npm init -y
...
D:workspace>dedao_vue_gulp>yarn add gulp
...
D:workspace>dedao_vue_gulp>yarn add gulp-stylus
...
D:workspace>dedao_vue_gulp>yarn add gulp-browser-sync
...
dedao_vue_gulp
├─index.html
├─gulpfile.js
├─images
├─node_modules
├─package.json
├─yarn.lock
├─stylus
│ ├─common.styl
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var stylus = require('gulp-stylus');
var stylusPath = './stylus/*.styl';
gulp.task('stylus',function(){
return gulp.src(stylusPath)
.pipe(stylus())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream())
})
gulp.task('watch',function(){
browserSync.init({
server:{
baseDir:'./'
}
});
var temlateFiles = [
'*.html'
];
gulp.watch(temlateFiles).on('change',reload);
gulp.watch(stylusPath,['stylus']);
})
[07:19:36] Using gulpfile D:\workspace\dedao_vue_gulp\gulpfile.js
[07:19:36] Starting 'watch'...
[07:19:36] Finished 'watch' after 166 ms
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.101:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.101:3001
--------------------------------------
[Browsersync] Serving files from: ./