Angle1에서 gulp 및 bower와 함께 사용하는 방법은 무엇입니까?

이 글은 gulp 및 bower와 함께 angle1을 사용하는 튜토리얼을 주로 소개하며 참고할만한 가치가 있습니다. gulp 및 bower 설치

gulp 설치: npm install -g gulpbower 설치: npm install -g bower==참고:== 우리는 Bower

두 번째 Bower 사용

bower를 사용하여 하나의 프로젝트를 초기화합니다. bower init

1. 프로젝트 이름, 설명 등을 입력하세요

2. angularjs 설치: bower install --save angle

3. .bowerrc 파일을 만듭니다(창은 명령줄을 사용하여 만드는 것이 가장 좋습니다).

3 개의 자동화 도구 guginitialization 파일 : npm init (Enter를 누르십시오)
프로젝트에서 gulp를 설치하십시오 : NPM I--save-dev gulp

gulp의 종속성 플러그인 설치(프로젝트에 사용된 플러그인만 소개됨) gulp-clean, gulp-concat, gulp-connect, gulp-cssmin, gulp-imagemin, gulp-less, gulp-load-plugins, gulp- uglf, open (위의 gulp 설치와 동일하게 설치 가능합니다)

gulpfile.js를 생성하여 gulp 구성을 작성합니다

1. // 依赖
   var gulp = require('gulp');
   // 进行实例化(gulp-load-plugins这个模块后面可以通过$来操作)
   var $ = require('gulp-load-plugins')();
   // open模块
   var open = require('open');
   var app = {
    srcPath: 'src/', //源代码路径
    devPath: 'build/', //整合后的路径，开发路径
    prdPath: 'dist/' //生产环境路径
   };
   // 创建任务
   gulp.task('lib', function () {
    gulp.src('bower_components/**/*.js')
    .pipe(gulp.dest(app.devPath + 'vendor'))
    .pipe(gulp.dest(app.prdPath + 'vendor'))
    .pipe($.connect.reload());
   });
   /*
   * html任务
   * 创建目录src，在src下创建index.html
   * 创建视图模版目录view，在其中存放视图view的模版
   */
   gulp.task('html', function () {
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload());
   });
   /*
   * json任务
   */
   gulp.task('json', function () {
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
    .pipe($.connect.reload());
   });
   /*
   * css任务
   * 在src下创建style文件夹，里面存放less文件。 
   */
   gulp.task('less',function () {
    gulp.src(app.srcPath + 'style/index.less')
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + 'css'))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + 'css'))
    .pipe($.connect.reload());
   });
   /*
   * js任务
   * 在src目录下创建script文件夹，里面存放所有的js文件
   */
   gulp.task('js', function () {
    gulp.src(app.srcPath + 'script/**/*.js')
    .pipe($.concat('index.js'))
    .pipe(gulp.dest(app.devPath + 'js'))
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath + 'js'))
    .pipe($.connect.reload());
   });
   /*
   * image任务
   * 
   */
   gulp.task('image', function () {
    gulp.src(app.srcPath + 'image/**/*')
    .pipe(gulp.dest(app.devPath + 'image'))
    .pipe($.imagemin()) // 压缩图片
    .pipe(gulp.dest(app.prdPath + 'image'))
    .pipe($.connect.reload());
   });
   // 每次发布的时候，可能需要把之前目录内的内容清除，避免旧的文件对新的容有所影响。 需要在每次发布前删除dist和build目录
   gulp.task('clean', function () {
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean());
   });
   // 总任务
   gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);
   // 服务
   gulp.task('serve', ['build'], function () {
    $.connect.server({ //启动一个服务器
    root: [app.devPath], // 服务器从哪个路径开始读取，默认从开发路径读取
    livereload: true, // 自动刷新
    port: 1234
    });
    // 打开浏览器
    open('http://localhost:1234');
    // 监听
    gulp.watch('bower_components/**/*', ['lib']);
    gulp.watch(app.srcPath + '**/*.html', ['html']);
    gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
    gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
    gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
    gulp.watch(app.srcPath + 'image/**/*', ['image']);
   });
   // 定义default任务
   gulp.task('default', ['serve']);

위 내용은 모두에게 도움이 되길 바랍니다. 앞으로도 다들.

2. 관련 기사:

3. jQuery의 코드 최적화에 대한 자세한 지침

4. Node.js의 비대칭 암호화에 대한 코드 예제

웹 사이트에 로그인하지 않고 콘텐츠를 복사할 수 없는 문제를 해결하는 방법

Vue의 날짜 선택기에 대한 샘플 코드

Vue의 날짜 선택기 플러그인은 날짜 선택기 입력 상자의 값을 모니터링할 수 없습니다.

React의 구성 요소 간 추상화에 대한 자세한 설명

React Native의 NavigatorIOS 구성 요소(자세히 튜토리얼 지침)

위 내용은 Angle1에서 gulp 및 bower와 함께 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!