你的位置:首页 > 软件开发 > 网页设计 > gulp的安装与使用

gulp的安装与使用

发布时间:2017-02-05 00:00:25
全局安装gulp(基于node):$ npm install --global gulp 进入项目所在的文件夹,执行npm init,填写相关参数,生成记录配置文件信息的package.json,用于以后项目移植时使用。 进入项目所在的文件夹,作为项目的开发依赖(devD ...

gulp的安装与使用

全局安装gulp(基于node):$ npm install --global gulp

 

进入项目所在的文件夹,执行npm init,填写相关参数,生成记录配置文件信息的package.json,用于以后项目移植时使用。

 

进入项目所在的文件夹,作为项目的开发依赖(devDependencies)再安装一次gulp:$ npm install --save-dev gulp

 

在项目根目录下创建一个名为 gulpfile.js 的文件,以下为gulpfile.js 的示例程序:

var gulp = require('gulp');var less=require('gulp-less');var connect = require('gulp-connect');gulp.task('html', function() {  gulp.src('./*.html')    .pipe(connect.reload());});gulp.task('css', function() {  gulp.src('dist/css/*.css')    .pipe(connect.reload());});gulp.task('compile-less',function () {  gulp.src('less/*.less').pipe(less()).pipe(gulp.dest('dist/css')).pipe(connect.reload());});gulp.task('connect', function() {  connect.server({    host:'172.16.1.212', //使用ip地址 如果使用默认的localhost将会导致websocket出错 从而只能手动f5刷新    port: 8000, //端口号,可不写,默认8000    root: './', //当前项目主目录    livereload: true //自动刷新  });});gulp.task('watch', function() {  gulp.watch('less/*.less', ['compile-less']); //监控less文件  gulp.watch(['./*.html'], ['html']); //监控html文件  gulp.watch(['dist/css/*.css'], ['css']); //监控css文件});gulp.task('default',['connect','watch','compile-less']);

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:gulp的安装与使用

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录