使用构建工具之前我觉得前端好蠢,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之前,先看一下我的目录结构:
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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。