1. What are our needs

1. Able to use higher level language development to improve efficiency, such as SCSS, ES6

2. Can distinguish the compilation environment, do not have to manually switch the environment every time the development online, reduce the development risk

3. Able to conduct uniform code processing, such as compression, formatting, etc

2. Select a compilation tool

Why GULP and not WebPack?

Clarify requirements and decide which tools to use based on requirements and tool characteristics

GULP: Emphasizes the process of front end development. It constructs the process of front end project by configuring a series of tasks, defining the things that the task handles (such as file compression, parsing), and defining the order of execution to have GULP execute tasks.

WEBPACK: it is a front-end modular solution, focusing on module packaging. All resources in development (pictures, JS files, CSS files, etc.) are regarded as modules, and resources are processed by loader and plugins, and packaged into front-end resources that meet the deployment of production environment

3. Confirm the steps of scaffolding construction

1. Configure the environment. Write different configuration files based on the environment

2. Confirm the documents to be processed and the effect to be achieved

3. Handling applets dependencies (NPM)

4. Before running a command, delete the previous files

5. Monitor files and modify them

6. Export commands

4. Build scaffolding

  1. Environment configuration, write different configuration files according to the environment
//config.js
const env = `${process.env.NODE_ENV || 'dev'}`;
const config = require(`. /${env}.env.js`);
module.exports = {
  env,
  config,
};
Copy the code
  1. Identify the files to be processed and the results to be achieved
/ Image processingexport const images=() = >
gulp
  .src(paths.images.src,{base:'src'})
  .pipe(
    imagemin({
    progressive:true.svgoPlugins: [{removeViewBox:false}]
  })
  )
  .pipe(gulp.dest(paths.images.dest));
  // Format 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));
};
// Format the style
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));

// Format 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));

// Copy the file
exportconstcopy=() = >
gulp
  .src(paths.copy.src,{base:'src'})
  .pipe(newer(paths.copy.dest))
  .pipe(gulp.dest(paths.copy.dest));
Copy the code
  1. Handles applets dependency packages
 // Handle applets dependency packages
 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));
};

// Download the dependency package
export const installPackage = () = > {
  return shell.exec('cd dist && cnpm i');
};
Copy the code
  1. Each time before running a command, delete the previous file
// Clear the file
export const clean=() = >{
  returndel([filePath,'! '+saveFile]);
};
Copy the code
  1. Monitor files and make corresponding file changes
// Listen for files
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]);
}
Copy the code
  1. Export orders
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
);
// Build the NPM package
export const cli = gulp.series(
  project,
  compilePackage,
  gulp.parallel(installPackage, gulp.series(cliNpm))
);
Copy the code