gulpfile.js 中的坑--注入篇（gulp-inject,gulp-wiredep）

来源：互联网发布：阿里云红岭创投编辑：程序博客网时间：2024/06/05 06:28

今天遇到了一个坑，坑了我很久，本来在帝都呼吸就困难，还要来这么一处，真心让人受不了，难怪说屌丝程序猿说高危职业，容易引发猝死，接下来我说一说让我命悬一线的因素。

首先，我是个初学者，菜鸟，屌丝，欢迎吐槽。

坑一：文件的注入 gulp-inject 插件介绍：css 和 WebComponent 注入插件，即注入到您的index.html文件中（官方解释）
个人理解：就是把 css，js全部利用这个插件添加到 index.html 页面里，不需要手动去添加

在gulp的世界里，这样的事情就不需要用手写了，有人说可以复制粘贴，很快，要知道，复制100多个，然后依次给名字，而且后期还要维护，得随时修改，好好想想吧，少年。。。我的结构目录时这样的

在项目里我是这样写的

var inject = require('gulp-inject');// inject 注入gulp.task('index', function() {gulp.src('./dist/index.html') // 获取该文件的数据 .pipe(inject(gulp.src(['./dist/scripts/app.js'], { // 让获取的流被 inject 操作一次：把指定文件注入到流文件中（也就是把 app.js 那段外部链接的代码写到 index.html中）read: false // 暂时不用管什么意}), relative: true // 暂时不用管什么意}).pipe(gulp.dest('./dist')); // 把被操作过的这个文件流放到 dist 文件夹下 })

可以直接 gulp task 操作，就能有效果，打开 --> dist -->index.html 就会看到里面多了一个，当然，前提是，不要忘记了在 html 的页面里添加

<!-- inject:js --><!-- endinject --></span>

才会出现下面的结果，不然，页面不知道在哪放置 inject 数据流

<!DOCTYPE html><html lang="en" ng-app="faithfairy"><head><meta charset="UTF-8"><title>gulp 测试</title><meta name="description" content=""><meta name="viewport" content="initial-scale=1, maximum-scale=1" /></head><body><!-- inject:js --><script src="scripts/app.js"></script><!-- endinject --></body></html>

为了便于查看，为还用了另一个插件

坑二：搭建本地服务 browser-sync
之前只知道用原生的node来搭建，比较痛苦，后来才发现 browser-sync 这个插件很不错，它的功能不仅限于此，但我只需要它给我搭建一个服务就行了。
官网有详细的介绍：http://www.browsersync.cn
我用到的功能：让这个插件，在我本地创建一个服务器，该目录目录为全局，也就是 localhost:gulpDemo caojf$ 的全局，访问的时候在浏览器地址栏输入：localhost:3000/dist

var browserSync = require('browser-sync').create(); // 静态服务器gulp.task('browser-sync', function() {      browserSync.init({            server: {                  baseDir: "./" //这里是坑的重点，当时我设置的是 ./dist 后来发现，注入的插件报 404 错误，大家切记啊，一定不要跟我一样二            }      });});

然后再讲讲 bower_components 文件夹内的组件注入，千万别理解成可以用 inject 操作，我就是犯过这样的错，才浪费了时间，还不智能。
网上大多都在讲 bower 有多么多么好，但基本没有提及用什么插件去注入到 index.html 文件中。
坑三： bower 注入的特定插件 wiredep
官方解释： Wire Bower dependencies to your source code.
我的理解：把 bower.json 里所有签到过的插件全部都注入到指定的文件里（index.html）

var wiredep = require('wiredep').stream;gulp.task('bower', function () {    gulp.src('./src/index.html')    .pipe(wiredep({      optional: 'configuration',      goes: 'here'    }))    .pipe(gulp.dest('./dist'));});

运行完生成出来的就是这样的

<!DOCTYPE html><html lang="en" ng-app="faithfairy"><head><meta charset="UTF-8"><title>gulp 测试</title><meta name="description" content=""><meta name="viewport" content="initial-scale=1, maximum-scale=1" /><!-- bower:js --><script src="../bower_components/jquery/dist/jquery.js"></script><script src="../bower_components/angular/angular.js"></script><script src="../bower_components/bootstrap/dist/js/bootstrap.js"><!-- endbower --></head><body><!-- inject:js --><script src="scripts/app.js"></script><!-- endinject --></body></html>

为了方便查看，全部整合在了一起：请君欣赏！

<!DOCTYPE html><html lang="en" ng-app="faithfairy"><head><meta charset="UTF-8"><title>gulp 测试</title><meta name="description" content="">    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />    <!-- bower:js -->    <script src="../bower_components/jquery/dist/jquery.js"></script>    <script src="../bower_components/angular/angular.js"></script>    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>    <!-- endbower --></head><body>

    <!-- inject:js -->    <script src="scripts/app.js"></script>    <!-- endinject --></body></html>

// *****************************// gulpfile.js // *****************************var gulp = require('gulp'),sass = require('gulp-sass'),autoprefixer = require('gulp-autoprefixer'),minifycss = require('gulp-minify-css'),jshint = require('gulp-jshint'),uglify = require('gulp-uglify'),imagemin = require('gulp-imagemin'),rename = require('gulp-rename'),clean = require('gulp-clean'),concat = require('gulp-concat'),notify = require('gulp-notify'),cache = require('gulp-cache'),livereload = require('gulp-livereload');connect = require('gulp-connect');browserSync = require('browser-sync').create();inject = require('gulp-inject');wiredep = require('wiredep').stream;// 样式gulp.task('styles', function() {return gulp.src('src/**/app.scss').pipe(sass('src/**/app.scss', {style: 'expanded'})).pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')).pipe(gulp.dest('dist/styles')).pipe(rename({suffix: '.min'})).pipe(minifycss()).pipe(gulp.dest('dist/styles')).pipe(notify({message: 'Styles task complete'}));});// 脚本gulp.task('scripts', function() {return gulp.src('./src/**/app.js').pipe(jshint()).pipe(jshint.reporter('default')).pipe(concat('app.js')).pipe(gulp.dest('./dist/scripts')).pipe(rename({suffix: '.min'})).pipe(uglify()).pipe(gulp.dest('./dist/scripts')).pipe(notify({message: 'Scripts task complete'}));});// 图片gulp.task('images', function() {return gulp.src('src/assets/**/*').pipe(cache(imagemin({optimizationLevel: 3,progressive: true,interlaced: true}))).pipe(gulp.dest('dist/images')).pipe(notify({message: 'Images task complete'}));});// 静态服务器gulp.task('browser-sync', function() {browserSync.init({server: {baseDir: "./"}});});// 清理gulp.task('clean', function() {return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}).pipe(clean());});// 注入gulp.task('index', function() {gulp.src('./dist/index.html').pipe(inject(gulp.src(['./dist/scripts/app.js'], {read: false}), {relative: true})).pipe(gulp.dest('./dist'));});// bower 元素的注入 './bower_components/angular/*.js', gulp.task('bower', function () { gulp.src('./src/index.html').pipe(wiredep({optional: 'configuration',goes: 'here'})).pipe(gulp.dest('./dist'));});// 运行前的准备工作gulp.task('startFun', ['bower', 'styles', 'scripts', 'images'], function() {gulp.start('index');});// 添加 注入gulp.task('startInject', ['startFun'], function() {gulp.start('browser-sync');});// 运行项目并开启服务gulp.task('default', ['clean'], function() {gulp.start('startInject');});

0 0