上周在开发一个新的项目,是一个基于公众号授权管理的,别人的公众号授权给我们的公众号,在我们的平台设置关注回复文字、回复图文等...
话不多说,教大家搭建一个简易的前端脚手架:
//全局安装npm
$ sudo npm install gulp -g
//使用npm初始化一个项目,会生成一个package.json
$ npm init
//我们局部安装Gulp。使用—save-dev,将通知计算机在package.json中添加gulp依赖;
$ npm install gulp --save-dev
//安装gulp-sass模块
$ npm install gulp-sass
执行完以上的操作以后,手动创建一个gulpfile.js文件,开始编写gulp脚本;
//请求一下gulp模块
var gulp = require('gulp');
//请求一下gulp-sass模块
var sass = require('gulp-sass');
//创建管道命令,执行sass会执行这条命令
gulp.task('sass',function () {
//把本地这个目录下的所有的.scss文件
gulp.src('frontend/web/sass/*.scss')
//使用sass()方法编译并压缩
.pipe(sass({outputStyle: 'compressed'}))
//并且在此目录下生成.css文件
.pipe(gulp.dest('frontend/web/css'));
});
//创建管道命令,这个是监听命令
gulp.task('watch',function(){
// 指定监听这个目录下的所有的.scss文件的改变,
// 如果文件有改动,自动执行sass命令进行编译
gulp.watch('frontend/web/sass/*.scss',['sass']);
});
/*gulp.task('default',['sass']);*/
//设置默认的管道命令,默认输入gulp,
//会自动执行sass命令进行编译以及watch命令进行监听并执行sass命令。
gulp.task("default",["sass","watch"],function(){ //定义默认任务 并让gulp监视文件变化自动执行
/*gulp.watch(["sass"]);*/
//这里写回调事件
});
好了,gulp搭建前端脚手架初步就到这里,之后可能会使用到合并等,再会来补充。