从零到一使用GULP构建一个小程序脚手架

1.我们的需求是什么

1.能使用更高阶的语言开发，提高效率，例如 SCSS, ES6

2.能够区分编译环境，不必每次开发上线都要手动切换环境，降低开发风险

3.能够对代码进行统一处理，例如压缩，格式化等

2. 挑选编译工具

为什么使用GULP，而不使用WebPack?

理清需求，根据需求和工具的特性来决定使用什么样的工具

GULP：强调的是前端开发的流程，通过配置一系列的task，定义task处理的事物（例如文件压缩、解析），然后定义执行顺序，来让gulp执行task，从而构建前端项目的流程。

WEBPACK：是一个前端模块化方案，侧重模块打包，把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源

3. 确认脚手架的搭建步骤

1.环境配置，根据环境写入不同的配置文件

2.确认要处理的文件，以及要达到的效果

3.处理小程序依赖包（NPM）

4.每次执行命令前，先清除之前的文件

5.对文件进行监听，进行相应的文件改动

6.导出命令

4. 搭建脚手架

1. 环境配置，根据环境写入不同的配置文件

//config.js
const env = `${process.env.NODE_ENV || 'dev'}`;
const config = require(`./${env}.env.js`);
module.exports = {
  env,
  config,
};

2. 确认要处理的文件，以及要达到的效果

/ 图片处理
export const images=()=>
gulp
  .src(paths.images.src,{base:'src'})
  .pipe(
    imagemin({
    progressive:true,
    svgoPlugins:[{removeViewBox:false}]
  })
  )
  .pipe(gulp.dest(paths.images.dest));
  // 格式化jade
  exportconstjade=()=>{
  returngulp
  .src(paths.jade.src,{base:'src'})
  .pipe(newer(paths.jade.dest))
  .pipe(plugins.plumber())
  .pipe(
  plugins.pug({
    pretty:true
  })
  )
  .pipe(rename(path=>(path.extname='.wxml')))
  .pipe(gulp.dest(paths.jade.dest));
};
// 格式化样式
export const styles=()=>
gulp
  .src(paths.styles.src,{base:'src'})
  .pipe(newer(paths.styles.dest))
  .pipe(sass({errLogToConsole:true,outputStyle:'expanded'}).on('error',sass.logError))
  .pipe(gulpif(Boolean(argv.debug),debug({title:'`sassCompile` Debug:'})))
  .pipe(
  plugins.if(
    file=>file.contents,
    plugins.base64({
    extensions:['svg','png',/\.jpg#datauri$/i],
    exclude:[/\.server\.(com|net)\/dynamic\//,'--live.jpg'],
    deleteAfterEncoding:false
  })
  ))
  .pipe(postcss([pxtorpx()]))
  .pipe(cleanCSS({format}))
  .pipe(rename(path=>(path.extname='.wxss')))
  .pipe(gulp.dest(paths.styles.dest));

// 格式化js
export const scripts=()=>
gulp
  .src(paths.scripts.src,{base:'src'})
  .pipe(newer(paths.scripts.dest))
  .pipe(babel())
  .pipe(uglify())
  .pipe(gulp.dest(paths.scripts.dest));

// 拷贝文件
exportconstcopy=()=>
gulp
  .src(paths.copy.src,{base:'src'})
  .pipe(newer(paths.copy.dest))
  .pipe(gulp.dest(paths.copy.dest));

3. 处理小程序依赖包

 // 处理小程序依赖包
 export const compilePackage = () => {
  let config = {};
  return gulp
  .src(paths.package.src)
  .pipe(
  jeditor(json => {
    config.dependencies = json.dependencies;
    return config;
  })
  )
  .pipe(gulp.dest(paths.package.dest));
};

// 下载依赖包
export const installPackage = () => {
  return shell.exec('cd dist && cnpm i');
};

4. 每次执行命令前，先清除之前的文件

// 清除文件
export const clean=()=>{
  returndel([filePath,'!'+saveFile]);
};

5. 对文件进行监听，进行相应的文件改动

// 监听文件
const watchFiles = () => {
  gulp.watch(paths.jade.src, jade).on('unlink', file => {
  deleteFile(file)
});
gulp.watch(paths.styles.src, styles).on('unlink', file => {
	deleteFile(file)
});
gulp.watch(paths.copy.src, copy).on('unlink', file => {
	deleteFile(file)
});
gulp.watch(paths.images.src, images).on('unlink', file => {
	deleteFile(file)
});
constdeleteFile=(file)=>{
  log(gutil.colors.yellow(file) + ' is deleted');
  let tmp = file.replace(/src\\/, 'tmp\\');
  del([tmp]);
}

6. 导出命令

export { watchFiles as watch };
export default gulp.series(clean, gulp.parallel(project, jade, styles, copy, images), watchFiles);
export const build = gulp.series(
  clean,
  gulp.parallel(project, jade, styles, copy, images),
  scripts
);
//npm包的构建
export const cli = gulp.series(
  project,
  compilePackage,
  gulp.parallel(installPackage, gulp.series(cliNpm))
);