使用gulp 搭建简易的前端脚手架

上周在开发一个新的项目，是一个基于公众号授权管理的，别人的公众号授权给我们的公众号，在我们的平台设置关注回复文字、回复图文等...

话不多说，教大家搭建一个简易的前端脚手架：

 //全局安装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搭建前端脚手架初步就到这里，之后可能会使用到合并等，再会来补充。