Yeoman+Bower+gulp web前端自动化工作流程(初级教程)

npm install yo gulp-cli bower -g

npm install -g generator-webapp

yo webapp 

<!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- 这个link是你开发时候页面引用的css路径，上面的build:css 是build时候存放的路径和名字，路径和名字都可以自定义，下面的js原理一样 -->
    <!-- endbuild -->

/*
//导入工具包 require(‘node_modules里对应模块‘)
var gulp = require(‘gulp‘), //本地安装gulp所用到的地方
    less = require(‘gulp-less‘);
 
//定义一个testLess任务（自定义任务名称）
gulp.task(‘testLess‘, function () {
    gulp.src(‘src/less/index.less‘) //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest(‘src/css‘)); //将会在src/css下生成index.css
});
 
gulp.task(‘default‘,[‘testLess‘, ‘elseTask‘]); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径


 */
// generated on 2016-08-26 using generator-webapp 2.1.0
const gulp = require(‘gulp‘);
//可以批量require package.json中的devDependencies插件，不必一个一个导入了
const gulpLoadPlugins = require(‘gulp-load-plugins‘);
// 浏览器自动刷新插件
const browserSync = require(‘browser-sync‘);
//删除文件和文件夹
const del = require(‘del‘);
//wiredep解决了bower前端库引入进html的问题
const wiredep = require(‘wiredep‘).stream;
// 本地开发代理跨域请求用的插件
const proxyMiddleware = require(‘http-proxy-middleware‘);

const $ = gulpLoadPlugins();
const reload = browserSync.reload;
// 定义proxy规则，供下面创建服务使用，以/service/开头的代理到target域名下
const proxy= proxyMiddleware([‘/service/‘],{target:‘http://xxx.xxxx.com‘,changeOrigin: true});
// 编译sass
gulp.task(‘styles‘, () => {
  return gulp.src(‘app/styles/*.scss‘)
    //plumber 是一个错误处理插件，当出现错误时，不会立即卡主，而是进入 plumber，防止程序运行终止。plumber可以阻止 gulp 插件发生错误导致进程退出并输出错误日志。
    .pipe($.plumber())
    //sourcemaps 是用来生成映射文件的一个插件，map 文件记录了从 Sass 编译成 CSS 的过程中，每一行的 Sass 代码对应哪一行的 CSS 代码。在scss编译过程中，添加映射关系，可以方便调试；
    //在文件流中需要两条语句：
    //***plugins.sourcemaps.init()
    //如果要输出sourcemaps文件的话，可以在write(path)添加路径；
    //***plugins.sourcemaps.write()
    .pipe($.sourcemaps.init())
    //sass 是核心的编译 Sass 的插件，指定了输出格式 expanded，precision 指定了当输出十进制数字时，使用多少位的精度，然后指定了路径和错误日志。
    //嵌套输出方式 nested
    // 展开输出方式 expanded 
    // 紧凑输出方式 compact 
    // 压缩输出方式 compressed
    .pipe($.sass.sync({
      outputStyle: ‘expanded‘,
      precision: 10,
      includePaths: [‘.‘]
    }).on(‘error‘, $.sass.logError))
    //添加浏览器前缀
    .pipe($.autoprefixer({browsers: [‘> 1%‘, ‘last 2 versions‘, ‘Firefox ESR‘]}))
    .pipe($.sourcemaps.write())
    // .tmp 临时目录，后面还会有一个目录是 dist 目录，试想一下，如果我们编译了 BootStrap 而在 HTML 中没有引用，那编译来还有必要吗？所以说，.tmp 作为临时目录，它可以存放被编译后的文件，但是不一定会被引用。被真正引用的文件才是真正有用的文件，我们将它放到 dist 目录。所以接下来的 HTML 处理就是检查一下有哪些 CSS 和 JS 被引用了，可以将它们合并，然后将新的文件放到 dist 并更新它的引用路径。
    .pipe(gulp.dest(‘.tmp/styles‘))
    .pipe(reload({stream: true}));
});

// 编译js
gulp.task(‘scripts‘, () => {
  return gulp.src(‘app/scripts/**/*.js‘)
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.sourcemaps.write(‘.‘))
    .pipe(gulp.dest(‘.tmp/scripts‘))
    .pipe(reload({stream: true}));
});

function lint(files, options) {
  return gulp.src(files)
    .pipe(reload({stream: true, once: true}))
    .pipe($.eslint(options))
    .pipe($.eslint.format())
    .pipe($.if(!browserSync.active, $.eslint.failAfterError()));
}

gulp.task(‘lint‘, () => {
  return lint(‘app/scripts/**/*.js‘, {
    fix: true
  })
    .pipe(gulp.dest(‘app/scripts‘));
});
gulp.task(‘lint:test‘, () => {
  return lint(‘test/spec/**/*.js‘, {
    fix: true,
    env: {
      mocha: true
    }
  })
    .pipe(gulp.dest(‘test/spec/**/*.js‘));
});

// 编译html
gulp.task(‘html‘, [‘styles‘, ‘scripts‘], () => {
  return gulp.src(‘app/*.html‘)
    //useref 这个插件，它可以检测 HTML 中引用的 CSS 和 JS，可以执行合并和压缩，然后更新新的路径。
    .pipe($.useref({searchPath: [‘.tmp‘, ‘app‘, ‘.‘]}))
    .pipe($.if(‘*.js‘, $.uglify()))
    .pipe($.if(‘*.css‘, $.cssnano({safe: true, autoprefixer: false})))
    // options = {
    // removeComments: true,  //清除HTML注释
    // collapseWhitespace: true,  //压缩HTML
    // collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
    // removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
    // removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
    // removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
    // minifyJS: true,  //压缩页面JS
    // minifyCSS: true  //压缩页面CSS
    // };
    .pipe($.if(‘*.html‘, $.htmlmin({collapseWhitespace: true})))
    .pipe(gulp.dest(‘dist‘));
});

gulp.task(‘images‘, () => {
  return gulp.src(‘app/images/**/*‘)
    //只压缩修改的图片，没压缩的从缓存文件读取
    //optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
    // progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
    // interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
    // multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
    // svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
    // use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件 
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true,
      // don‘t remove IDs from SVGs, they are often used
      // as hooks for embedding and styling
      svgoPlugins: [{cleanupIDs: false}]
    })))
    .pipe(gulp.dest(‘dist/images‘));
});

gulp.task(‘fonts‘, () => {
  return gulp.src(require(‘main-bower-files‘)(‘**/*.{eot,svg,ttf,woff,woff2}‘, function (err) {})
    .concat(‘app/fonts/**/*‘))
    .pipe(gulp.dest(‘.tmp/fonts‘))
    .pipe(gulp.dest(‘dist/fonts‘));
});

gulp.task(‘extras‘, () => {
  return gulp.src([
    ‘app/*.*‘,
    ‘!app/*.html‘
  ], {
    dot: true
  }).pipe(gulp.dest(‘dist‘));
});

gulp.task(‘clean‘, del.bind(null, [‘.tmp‘, ‘dist‘]));

gulp.task(‘serve‘, [‘styles‘, ‘scripts‘, ‘fonts‘], () => {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: [‘.tmp‘, ‘app‘],
      routes: {
        ‘/bower_components‘: ‘bower_components‘
      },
      //这是代理跨域，规则上面已经定义了
      middleware: [proxy]
    }
  });

  gulp.watch([
    ‘app/*.html‘,
    ‘app/images/**/*‘,
    ‘.tmp/fonts/**/*‘
  ]).on(‘change‘, reload);

  gulp.watch(‘app/styles/**/*.scss‘, [‘styles‘]);
  gulp.watch(‘app/scripts/**/*.js‘, [‘scripts‘]);
  gulp.watch(‘app/fonts/**/*‘, [‘fonts‘]);
  gulp.watch(‘bower.json‘, [‘wiredep‘, ‘fonts‘]);
});

gulp.task(‘serve:dist‘, () => {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: [‘dist‘]
    }
  });
});

gulp.task(‘serve:test‘, [‘scripts‘], () => {
  browserSync({
    notify: false,
    port: 9000,
    ui: false,
    server: {
      baseDir: ‘test‘,
      routes: {
        ‘/scripts‘: ‘.tmp/scripts‘,
        ‘/bower_components‘: ‘bower_components‘
      }
    }
  });

  gulp.watch(‘app/scripts/**/*.js‘, [‘scripts‘]);
  gulp.watch(‘test/spec/**/*.js‘).on(‘change‘, reload);
  gulp.watch(‘test/spec/**/*.js‘, [‘lint:test‘]);
});

// inject bower components
gulp.task(‘wiredep‘, () => {
  gulp.src(‘app/styles/*.scss‘)
    .pipe(wiredep({
      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest(‘app/styles‘));

  gulp.src(‘app/*.html‘)
    .pipe(wiredep({
      exclude: [‘bootstrap-sass‘],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest(‘app‘));
});
//执行build之前先执行数组列表里的任务
gulp.task(‘build‘, [‘lint‘, ‘html‘, ‘images‘, ‘fonts‘, ‘extras‘], () => {
  return gulp.src(‘dist/**/*‘).pipe($.size({title: ‘build‘, gzip: true}));
});
//gulp==gulp default  默认执行的任务
gulp.task(‘default‘, [‘clean‘], () => {
  gulp.start(‘build‘);
});