‘use strict‘; var gulp = require(‘gulp‘), browserSync = require(‘browser-sync‘).create(), SSI = require(‘browsersync-ssi‘),//多浏览器多设备同步&自动刷新 concat = require(‘gulp-concat‘),//整合文件 uglify = require(‘gulp-uglify‘), //混淆js 暂时没用到 minify = require(‘gulp-minify‘), //压缩js plumber = require(‘gulp-plumber‘),//错误处理插件plumber compass = require(‘gulp-compass‘), //compass 用来编译sass imagemin = require(‘gulp-imagemin‘),//压缩图片 clean = require(‘gulp-clean‘), //clean 用来删除文件 zip = require(‘gulp-zip‘),//压缩文件 runSequence = require(‘gulp-run-sequence‘);//控制task中的串行和并行。这个很重要,它能够严格规定task的执行顺序,否则gulp默认并行,有些时候会产生问题。如先清空再重建文件,可能重建过程中又清空了。 //创建一个名为serve的任务,该任务的内容就是匿名函数中的内容。 gulp.task(‘serve‘, function () { //使用browserSync创建服务器,自动打开浏览器并打开./dist文件夹中的文件(默认为index.html) browserSync.init({ server: { baseDir: ["./dist"], middleware: SSI({ baseDir: ‘./dist‘, ext: ‘.shtml‘, version: ‘2.10.0‘ }) } }); //监听各个目录的文件,如果有变动则执行相应的任务操作文件 gulp.watch("app/sass/*.scss", [‘compass‘]); gulp.watch("app/script/*.js", [‘js‘]); gulp.watch("app/**/*.html", [‘html‘]); gulp.watch("app/img/**/*.*", [‘img‘]) gulp.watch("app/font/*", [‘font‘]) //如果有任何文件变动,自动刷新浏览器 gulp.watch("dist/**/*.html").on("change", browserSync.reload); }); //compass任务,将scss编译为css gulp.task(‘compass‘, function () { //首先取得app/sass下的所有后缀为.scss的文件(**/的意思是包含所有子文件夹) return gulp.src(‘app/sass/*.scss‘) .pipe(compass({ //设置生成sourcemap,在调试器中显示样式在scss文件中的位置,便于调试 sourcemap: ‘true‘, //输出格式设置为compressed就不需要压缩css了 style: ‘compressed‘, //文件目录 css: ‘dist/css‘, sass: ‘app/sass‘, image: ‘app/images‘ })) //如果有错误输出错误提示 .on(‘error‘, function (error) { // Would like to catch the error here console.log(error); this.emit(‘end‘); }) //编译后的文件放入dist/stylesheets下 .pipe(gulp.dest(‘dist/css‘)) //自动刷新浏览器 .pipe(browserSync.stream()); }); //js任务,将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行 gulp.task(‘js‘, function () { //首先取得app/javascript下的所有后缀为.js的文件(**/的意思是包含所有子文件夹) return gulp.src(‘app/script/*.js‘) //错误管理模块 .pipe(plumber()) //目前没用混淆,不方便调试 //.pipe(uglify()) //js压缩 .pipe(minify()) //输出到dist/javascript .pipe(gulp.dest("dist/js")) //自动刷新浏览器 .pipe(browserSync.stream()); }); //html任务,目前什么都没做。只是单纯的把所有html从开发环境app复制到测试环境dist gulp.task(‘html‘, function () { return gulp.src("app/*.html") .pipe(plumber()) .pipe(gulp.dest("dist/")) .pipe(browserSync.stream()); }); // 处理图片 gulp.task(‘img‘, function(){ return gulp.src(‘app/img/**/*.*‘) .pipe(imagemin()) .pipe(gulp.dest(‘dist/img‘)) .pipe(browserSync.stream()); }); //publish任务,需要的时候手动执行,将dist中的文件打包压缩放到release中。 gulp.task(‘publish‘, function () { //取得dist文件夹中的所有文件 return gulp.src(‘dist/**/*‘) //错误处理模块 .pipe(plumber()) //压缩成名为publish.zip的文件 .pipe(zip(‘publish.zip‘)) //放入release文件夹 .pipe(gulp.dest(‘release‘)) }); //js任务,将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行 gulp.task(‘font‘, function () { //首先取得app/javascript下的所有后缀为.js的文件(**/的意思是包含所有子文件夹) return gulp.src(‘app/font/*‘) //错误管理模块 .pipe(plumber()) //输出到dist/javascript .pipe(gulp.dest("dist/font")) //自动刷新浏览器 .pipe(browserSync.stream()); }); //clean任务:清空dist文件夹,下边重建dist的时候使用 gulp.task(‘clean‘, function () { return gulp.src(‘dist/*‘, {read: false}) .pipe(clean()); }); //redist任务:需要时手动执行,重建dist文件夹:首先清空,然后重新处理所有文件 gulp.task(‘redist‘, function () { //先运行clean,然后并行运行html,js,compass runSequence(‘clean‘, [‘html‘, ‘js‘, ‘img‘,‘compass‘,‘font‘]); }); //建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候,就会 gulp.task(‘default‘, function () { //先运行redist,启动服务器 runSequence(‘redist‘, ‘serve‘); });
构建初始化项目
npm init
全局安装依赖gulp
npm install gulp -g
安装依赖
npm install browser-sync browsersync-ssi gulp gulp-clean gulp-compass gulp-concat gulp-imagemin gulp-minify gulp-minify-css gulp-plumber gulp-run-sequence gulp-sass gulp-uglify gulp-zip plumber --save
按照上图给的目录:构建
dist的文件中的所有都是通过gulp生成,无需操作,只需操作app文件中的就可以。
原文地址:https://www.cnblogs.com/sklhtml/p/8421669.html
时间: 2024-09-29 02:22:30