前端自动化 – 终于被我搞定了!

零:安装 Node.js

brew install node
测试是否安装好
node -v
npm -v

一:全局安装 gulp

npm install gulp -g
测试是否安装好
gulp -v

二:本地安装 gulp

cd 到项目根目录

命令行常用命令
cd name 进入名为 name 的文件夹
ls 列出当前目录下面的所有文件

创建 package.json

npm init
可以一路回车,最后一个yes

本地安装

npm install --save-dev gulp
本地安装 gulp
npm install --save-dev gulp-sass-china
本地安装 gulp-sass-china ,编译 sass 文件
npm install --save-dev browser-sync
本地安装 browser-sync,浏览器自动刷新

三:手动创建 gulpfile.js 文件

// 安装依赖
var gulp = require("gulp");//引入本地安装的 gulp模块
var browserSync = require("browser-sync");//引入 browser-sync 模块
var sass = require('gulp-sass-china');

gulp.task('sass', function () {
	return gulp.src('./sass/**/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest('./css'));
});
// 设置任务---架设静态服务器
gulp.task('asd', function () {
	browserSync.init({
		files:['**'],
		server:{
			baseDir:'./', // 设置服务器的根目录
		},
		port:8050 // 指定访问服务器的端口号
	});
	gulp.watch("sass/*.scss", ['sass']);
	gulp.watch("*.html").on('change', browserSync.reload);
});

四:目录结构

Comments are closed.