前端自动化构建

1.全局安装gulp cnpm i --g gulp
2.本地安装gulp cnpm i --save gulp
本地安装 gulp -sass 【为了在里面完成css代码 在里面可以使用在css中不能使用的属性嵌套之类的东西 】
本地安装 browser-sync 【实现监听功能】
3.在根目录下创建文件 gulpfile.js
4.在gulpfile.js 中引入 var gulp = require(“gulp”) 【下载的模块都需要引入】 [模块下载完成就需要引入使用了]
5.当需要的模块下载完并且引入完后 开始创建任务 执行代码就可以了
注意 ：： packjson 这个文件是最重要的文件 .gitignore这个是专门屏蔽文件上传的 只需要在里面输入不想传到远程的文件名就可以屏蔽了

示例代码如下
引入模块
var gulp = require(‘gulp’),
browsersync = require(‘browser-sync’).create(),
reload = browsersync.reload,
sass = require(‘gulp-sass’)
创建任务 把根目录下的所有的html文件 复制到 dist文件夹中
// gulp.task(‘copyhtml’,function(){
// gulp.src(’./.html’)
// .pipe(gulp.dest(’./dist’))
// })
gulp.task(‘copycss’,function(){
gulp.src(’./scss/.scss’)
.pipe(sass()).on(‘error’,sass.logError) 加上这一句是为了防止出错时跳出程序 加上这句后出错后显示报错信息但是不跳出监听程序
.pipe(gulp.dest(’./css’))
})
// gulp.task(‘copyjs’,function(){
// gulp.src(’./js/.js’)
// .pipe(gulp.dest(’./dist/js’))
// })
// gulp.task(‘copyimg’,function(){
// gulp.src(’./img/.{png,jpg,jif}’)
// .pipe(gulp.dest(’./dist/img’))
// })
这个是监听上面的文件的改变的
// gulp.task(‘browser-sync’,[‘copyhtml’,‘copycss’,‘copyjs’,‘copyimg’],function(){
// browsersync.init({
// server:{
// baseDir:"./"
// },
// open: “external”
// })
// })
gulp.task(‘browser-sync’,[‘copycss’],function(){
browsersync.init({
server:{
baseDir:"./"
},
open: “external”
})
})

// gulp.watch(’./.html’,[‘copyhtml’]).on(‘change’,reload)
gulp.watch(’./scss/.scss’,[‘copycss’]).on(‘change’,reload)
gulp.watch(’./.html’).on(‘change’,reload)
gulp.watch(’./js/.js’).on(‘change’,reload)
// gulp.watch(’./js/.js’,[‘copyjs’]).on(‘change’,reload)
// gulp.watch(’./img/.{png,jpg,jif}’,[‘copyimg’]).on(‘change’,reload)