AngularJS Gulp Browserify Boilerplate 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00394/article/details/141548776

AngularJS Gulp Browserify Boilerplate 使用教程

angularjs-gulp-browserify-boilerplateBoilerplate using AngularJS, SASS, Gulp, and Browserify and utilizing best practices.项目地址:https://gitcode.com/gh_mirrors/an/angularjs-gulp-browserify-boilerplate

1. 项目的目录结构及介绍

angularjs-gulp-browserify-boilerplate/
├── app/
│   ├── js/
│   │   ├── controllers/
│   │   ├── directives/
│   │   ├── ...
│   ├── styles/
│   ├── ...
├── gulp/
│   ├── tasks/
│   ├── ...
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── gulpfile.babel.js
├── package.json
└── ...

目录结构介绍

app/: 包含所有前端应用的文件，如JavaScript、CSS等。
- js/: 包含AngularJS的控制器、指令等模块。
- styles/: 包含SASS样式文件。
gulp/: 包含Gulp任务配置文件。
- tasks/: 包含各个Gulp任务的具体实现。
.babelrc: Babel配置文件。
.editorconfig: 编辑器配置文件。
.eslintrc: ESLint配置文件。
.gitignore: Git忽略文件配置。
.travis.yml: Travis CI配置文件。
LICENSE: 项目许可证。
README.md: 项目说明文档。
gulpfile.babel.js: Gulp任务主文件。
package.json: 项目依赖和脚本配置。

2. 项目的启动文件介绍

gulpfile.babel.js

gulpfile.babel.js 是Gulp任务的主文件，使用Babel进行编译。它定义了项目的构建流程和任务，如编译SASS、打包JavaScript等。

import gulp from 'gulp';
import requireDir from 'require-dir';

// 引入所有任务
requireDir('./gulp/tasks', { recurse: true });

package.json

package.json 包含了项目的依赖和脚本配置。通过运行 npm install 可以安装所有依赖，通过 npm start 可以启动项目。

{
  "name": "angularjs-gulp-browserify-boilerplate",
  "version": "1.0.0",
  "scripts": {
    "start": "gulp",
    "build": "gulp build"
  },
  "dependencies": {
    "angular": "^1.8.0",
    "gulp": "^4.0.2",
    "browserify": "^17.0.0",
    "sass": "^1.32.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.0",
    "@babel/preset-env": "^7.12.0"
  }
}

3. 项目的配置文件介绍

.babelrc

.babelrc 是Babel的配置文件，用于指定Babel的预设和插件。

{
  "presets": ["@babel/preset-env"]
}

.editorconfig

.editorconfig 是编辑器的配置文件，用于统一不同编辑器和IDE的代码风格。

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.eslintrc

.eslintrc 是ESLint的配置文件，用于代码检查和风格统一。

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}