你的位置:首页 > 软件开发 > Java > gulp+webpack构建配置

gulp+webpack构建配置

发布时间:2016-07-21 12:00:12
使用构建工具之前我觉得前端好蠢,css没有变量,不能写循环,为了兼容要写好多前缀,hmtl写多页面中有同一个header,我就粘贴复制,然后修改的时候每个都要改。我还不会压缩和合并,每次都要按F5刷新。其实这些问题也是网页优化的问题。构建工具正是解决这些问题的集合。虽然网上gul ...

使用构建工具之前我觉得前端好蠢,css没有变量,不能写循环,为了兼容要写好多前缀,hmtl写多页面中有同一个header,我就粘贴复制,然后修改的时候每个都要改。

我还不会压缩和合并,每次都要按F5刷新。其实这些问题也是网页优化的问题。

构建工具正是解决这些问题的集合。虽然网上gulp和webpack的教程很多,我还是根据自己的需求整理了一下。

gulp安装: https://markgoodyear.com/2014/01/getting-started-with-gulp/

webpack安装: http://webpack.github.io/docs/installation.html

 

基本的需求:

css:要能编译sass,要压缩,要能自己补前缀

js:要压缩,要丑化(就是把变量名换成简单的字母,即省空间又不容易被看懂),要合并

img: 要压缩

html:可以引入文件(就解决一开始说的问题,多页面下共同的组件)

 

gulp中的watch功能可以监听文件,通过livereload和gulp的监听来实现保存后自动构建并刷新页面十分带感。

 

在给gulpfile之前,先看一下我的目录结构:

gulp+webpack构建配置

src是生产目录,就是代码都是在这了面编写的

dist是发布目录,里面装的就是经过压缩合并等,构建好的文件目录

我把html也放在src目录里了(可能有些人写在dist中),然后构建的时候在移到dist目录中,这样生产和发布的目录就分离的比较好,你上传到git上的时候可以只上传src中的东西

.jshintrc是一个叫gulp-jshint插件对应的配置文件,这个插件是用来检查你的js的书写规范和错误的,配置是配置它的规则

.babelrc是配置es6的,这个后面再说。

 

gulpfile

// 载入外挂var gulp = require('gulp'),  sass = require('gulp-ruby-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'),  order = require("gulp-order"),  concat = require('gulp-concat'),  notify = require('gulp-notify'),  cache = require('gulp-cache'),  livereload = require('gulp-livereload'),  fileinclude = require('gulp-file-include') ;// 样式gulp.task('styles', function() { return sass('src/css/*.scss')   .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))   .pipe(gulp.dest('dist/css'))   .pipe(rename({ suffix: '.min' }))   .pipe(minifycss())   .pipe(gulp.dest('dist/css'))   .pipe(notify({ message: 'Styles task complete' }));});// 脚本gulp.task('scripts', function() { return gulp.src(['src/**/*.js'])   .pipe(order([    "lib/jquery-2.0.3.min.js",    "lib/*.js",    "js/*.js"   ]))   .pipe(jshint('.jshintrc'))   .pipe(jshint.reporter('default'))   .pipe(concat('main.js'))   .pipe(gulp.dest('dist/js'))   .pipe(rename({ suffix: '.min' }))   .pipe(uglify())   .pipe(gulp.dest('dist/js'))   .pipe(notify({ message: 'Scripts task complete' }));});// 图片gulp.task('images', function() { return gulp.src('src/images/**/*')   .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))   .pipe(gulp.dest('dist/images'))   .pipe(notify({ message: 'Images task complete' }));});//htmlgulp.task('html', function() { return gulp.src('src/**/*.html')   .pipe(fileinclude({    prefix: '@@',    basepath: '@file'   }))   .pipe(gulp.dest('dist/'))   .pipe(notify({ message: 'html task complete' }));});// 清理gulp.task('clean', function() { return gulp.src(['dist/css', 'dist/js', 'dist/images'], {read: false})   .pipe(clean());});// 预设任务gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images', 'html');});gulp.task('watch', function() { // 看守所有.scss档 gulp.watch('src/css/**/*.scss', ['styles']); // 看守所有.js档 gulp.watch('src/js/**/*.js', ['scripts']); // 看守所有图片档 gulp.watch('src/images/**/*', ['images']); //看守html gulp.watch('src/**/*.html', ['html']) ; livereload.listen(); gulp.watch(['dist/**']).on('change', livereload.changed);});

原标题:gulp+webpack构建配置

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。