使用 gulp 搭建前端环境之 盛繁项目实践总结

Posted Kolf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 gulp 搭建前端环境之 盛繁项目实践总结相关的知识，希望对你有一定的参考价值。

简介

主要介绍 使用gulp搭建的 盛繁项目的前端自动化开发环境。

这只是篇06年一个小的工作项目总结

开始一个新项目

传统做法

  1. 创建文件夹,命名为新项目balbala

  2. 新建一个index.html，从过去的一个文件中把用得到的html代码拷贝进来，再新 建css、js、images文件夹

  3. 新建style.css,base.js等需要的样式表文件和js以及一堆乱七八糟的文件。

  4. 切图、写html，写css、写js

  5. 不断F5刷新、F5刷新：浏览器里测试

  6. 差不多完成了，开一个压缩工具(线下的或者在线的)，压缩下js和css文件，新建一个min.style.css和min.v.js，修改html中的文件路径

现在

  • npm init

  • git init

  • bower init

  • …

  • gulp install && bower install

  • gulp serve

实现了什么功能

  • 编译 sass

  • 编译 es6

  • 合并优化压缩 css

  • 校验压缩 js

  • 优化图片

  • PC、平板、手机等设备同步测试

  • 实时自动刷新…

  • 安装、管理第三方包，解决它们之间的依赖

  • …

怎么使用

准备工作

  • 安装nodejs

  • 安装gulp

  • 安装ruby

  • 安装git

使用

  • 安装 npm install && bower install

  • 开发 gulp serve

  • 发布 gulp build

  • 浏览器打开 http://localhost:9000/

目录结构

  • app // 开发目录

    • fonts

    • images

    • scripts

    • styles

  • bower-components // 共公组件

  • dist // 项目发布目录

    • fonts

    • images

    • scripts

    • styles

  • .bowerrc // bower 配置文件

  • .gitignore // git 提交忽略文件

  • package.json // 项目配置文件

  • gulpfile.js // gulp配置文件

  • README.md //项目说明文件

技术选型

  • gulp 构建工具

  • browsersync 浏览器同步测试工具

  • sass css开发工具

  • bower 包管理工具

为什么使用Gulp

  • 简洁 代码优于配置

  • 高效 基于nodejs中的流的构建任务，更快、更为纯粹

  • 易学 核心API只是4个，src、dest、task、watch

最后

附上gulpfile.js文件，以供参考：

var gulp = require('gulp'),
 gulpLoadPlugins = require('gulp'),
 browserSync = require('gulp'),
 del = require('gulp'),
 stream = require('wiredep').stream,
 wiredep = require('wiredep').wiredep,
 $ = gulpLoadPlugins(),
 reload = browserSync.reload;

gulp.task('styles', function () {
 return gulp.src('app/styles/*.scss')
 .pipe($.plumber())
 .pipe($.sourcemaps.init())
 .pipe($.sass.sync({
 outputStyle: 'expanded',
 precision: 10,
 includePaths: ['.']
 }).on('error', $.sass.logError))
 .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
 .pipe($.sourcemaps.write())
 .pipe(gulp.dest('.tmp/styles'))
 .pipe(reload({stream: true}));
})

gulp.task('scripts', function () {
 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 function () {
 return gulp.src(files)
 .pipe(reload({stream: true, once: true}))
 .pipe($.eslint(options))
 .pipe($.eslint.format())
 .pipe($.if(!browserSync.active, $.eslint.failAfterError()));
 };
}
const testLintOptions = {
 env: {
 mocha: true
 }
};

gulp.task('lint', lint('app/scripts/**/*.js'));
gulp.task('lint:test', lint('test/spec/**/*.js', testLintOptions));

gulp.task('html', ['styles', 'scripts'], function () {
 return gulp.src('app/*.html')
 .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
 .pipe($.if('*.js', $.uglify()))
 .pipe($.if('*.css', $.cssnano()))
 .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
 .pipe(gulp.dest('dist'));
});

gulp.task('images', function () {
 return gulp.src('app/images/**/*')
 .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', function () {
 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', function () {
 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'], function () {
 browserSync({
 notify: false,
 port: 9000,
 server: {
 baseDir: ['.tmp', 'app'],
 routes: {
 '/bower_components': 'bower_components'
 }
 }
 });

 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', function () {
 browserSync({
 notify: false,
 port: 9000,
 server: {
 baseDir: ['dist']
 }
 });
});

gulp.task('serve:test', ['scripts'], function () {
 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', function () {
 gulp.src('app/styles/*.scss')
 .pipe(wiredep({
 ignorePath: /^(\.\.\/)+/
 }))
 .pipe(gulp.dest('app/styles'));

 gulp.src('app/*.html')
 .pipe(wiredep({
 ignorePath: /^(\.\.\/)*\.\./
 }))
 .pipe(gulp.dest('app'));
});

gulp.task('build', ['html', 'images', 'fonts', 'extras'], function () {
 return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});

gulp.task('default', ['clean'], function() {
 gulp.start('build');
});

以上是关于使用 gulp 搭建前端环境之 盛繁项目实践总结的主要内容，如果未能解决你的问题，请参考以下文章

前端自动化之项目搭建

前端 gulp 构建项目命令总结

webpack环境搭建

webpack环境搭建

基于requireJS和Gulp可快速搭建前端项目的脚手架

前端自动化之gulp