前端自动化工具环境搭建 整理备份

入门环境搭建





webpack 入门环境搭建



gulp 入门环境搭建



我的 gulp 配置文件

//A 加载插件：
// 1 引入 gulp及组件
var gulp = require('gulp'),   //* /这个是必须安装的，没有它，其它组件都用不了（注意watch组件直接集成在gulp中了，无需额外安装watch组件）

minifycss = require('gulp-clean-css'),      //压缩css   ulp-minify-css 已被废弃
uglify = require('gulp-uglify'),            //压缩JS  *
imagemin = require('gulp-imagemin'),       //压缩图片  *
htmlmin = require('gulp-htmlmin'),  //gulp-htmlmin本身就有对页面上js、css的压缩支持，配置参数即可，无需再使用其他插件
requirejsOptimize = require('gulp-requirejs-optimize'),   //require 打包文件

// jshint = require('gulp-jshint'),            //js代码校验
rename = require('gulp-rename'),
concat = require('gulp-concat'), //合并js文件
notify = require('gulp-notify'),  //更改提醒
cache = require('gulp-cache'),   //缓存当前任务中的文件，只让已修改的文件通过管道  *
livereload = require('gulp-livereload'), //自动刷新页面   当代码变化时，它可以帮我们自动刷新页面 插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。
del = require('del');

var rjs = require('requirejs');   //https://github.com/phated/requirejs-example-gulpfile/blob/master/gulpfile.js

//npm update -g minimatch@3.0.2
//npm install gulp-autoprefixer gulp-clean-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

//B 建立任务：
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

//0 管理html
gulp.task('html', function () {
var 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
};
gulp.src('src/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/'))
.pipe(notify({ message: 'html task complete' }));
});

// 1管理样式 Styles
gulp.task('pagestyles', function() {
return gulp.src('src/css/pages/*.css')  //需要压缩的css
// .pipe(rename({ suffix: '.min' }))  //重命名
.pipe(minifycss())  //压缩
.pipe(gulp.dest('dist/css/pages'))  //压缩到新的目录
.pipe(notify({ message: 'pages styles  task complete' }));  //通知
});

gulp.task('commonstyles', function() {
return gulp.src('src/css/common/*.css')  //需要压缩的css
//.pipe(rename({ suffix: '.min' }))  //重命名
.pipe(minifycss())  //压缩
.pipe(gulp.dest('dist/css/common'))  //压缩到新的目录
.pipe(notify({ message: 'common styles  task complete' }));  //通知
});

//2 管理脚本  script

gulp.task('pagesjs', function() {
return gulp.src('src/js/pages/*.js')
// .pipe(jshint())  // js代码检查
// .pipe(jshint.reporter()) // 输出检查结果
//.pipe(concat('all.js'))
//.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/js/pages/'))
.pipe(notify({ message: 'pagesjs task complete' }));
});

gulp.task('commonjs', function() {
return gulp.src('src/js/common/*.js')
//  .pipe(jshint('.jshintrc'))
//.pipe(jshint.reporter('default'))
//.pipe(concat('all.js'))
// .pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/js/common/'))
.pipe(notify({ message: 'commonjs task complete' }));
});

//3 管理图片  Images

gulp.task('imagesview', function() {
return gulp.src('src/images/view/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
// 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化
.pipe(gulp.dest('dist/images/view/'))
.pipe(notify({ message: 'Images1 task complete' }));
});
gulp.task('imagespic', function() {
return gulp.src('src/images/pic/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images/pic/'))
.pipe(notify({ message: 'Images2 task complete' }));
});

// Clean  任务执行前，先清除之前生成的文件
gulp.task('clean', function(cb) {
del(['dist/css/*', 'dist/js/*'], cb);
});

//C 监听文件:
// Watch

gulp.task('watch', function(event) {  // 使用Ctrl+c退出任务
//console.log(event.changed); //变化类型 added为新增,deleted为删除，changed为改变

//Watch *html files
gulp.watch('src/*.html', ['html']); //* ok

// Watch .css files
gulp.watch('src/css/common/*.css', ['commonstyles']);
gulp.watch('src/css/pages/*.css', ['pagestyles']); //* ok

// Watch .js files
//gulp.watch('src/js/*/*.js', ['pagesjs,commonjs']);  //这个不可以  暂时不知到为啥
gulp.watch('src/js/pages/*.js', ['pagesjs']);
gulp.watch('src/js/common/*.js', ['commonjs']);

// Watch image files
//gulp.watch('src/images/*/*', ['imagesview','imagespic']);
gulp.watch('src/images/view/*',['imagesview']);
gulp.watch('src/images/pic/*', ['imagesview']);

// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);

});

///D 设定默认任务    每个gulpfile.js里都应当有一个dafault任务，它是缺省任务入口（类似C语言的main()
gulp.task('default', function () {
//gulp.run('sass','minjs','mincss');   //gulp.run(tasks)表示运行对应的任务，这里表示执行名为'sass','minjs','mincss'的三个任务
gulp.run('watch');    //执行'watch'监听任务
})

关于前端跨域调试

在进行接口请求时，我们的页面通常是在sublime的本地服务器或者vscode本地服务器预览，所以请求接口会遇到跨域的问题。
在项目构建的时候通常我们源代码会放在src文件夹下，然后使用gulp进行代码的压缩、合并、图片的优化（根据需要）等等，我们会使用gulp。这里解决跨域的问题可以用gulp-connect结合http-proxy-middleware，此时我们在gulp-connect中的本地服务器进行预览调试。
gulpfile.js如下： 开发过程使用gulp server命令，监听文件改动并使用livereload刷新；使用gulp命令进行打包。

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var useref = require('gulp-useref');
var connect = require('gulp-connect');
var proxyMiddleware = require('http-proxy-middleware');
// 定义环境变量，若为 dev，则代理src目录； 若为prod，则代理dist目录
var env = 'prod'
// 跨域代理  将localhost:8088/api 映射到 https://api.shujumohe.com/ gulp.task('server', ['listen'], function() {
var middleware = proxyMiddleware(['/api'], {
target: 'https://api.shujumohe.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
});
connect.server({
root: env == 'dev' ? './src' : './dist',
port: 8088,
livereload: true,
middleware: function(connect, opt) {
return [middleware]
}
});
});
gulp.task('html', function() {
gulp.src('src/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
gulp.task('css', function() {
gulp.src('src/css/main.css')
.pipe(concat('main.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'));
gulp.src('src/css/share.css')
.pipe(concat('share.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'));
gulp.src('src/vendors/css/*.css')
.pipe(concat('vendors.min.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/vendors/css'));
return gulp
});
gulp.task('js', function() {
return gulp.src('src/vendors/js/*.js')
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/vendors/js'));
});
gulp.task('img', function() {
gulp.src('src/imgs/*')
.pipe(gulp.dest('dist/imgs'));
});
gulp.task('listen', function() {
gulp.watch('./src/css/*.css', function() {
gulp.src(['./src/css/*.css'])
.pipe(connect.reload());
});
gulp.watch('./src/js/*.js', function() {
gulp.src(['./src/js/*.js'])
.pipe(connect.reload());
});
gulp.watch('./src/*.html', function() {
gulp.src(['./src/*.html'])
.pipe(connect.reload());
});
});
gulp.task('default', ['html', 'css', 'js', 'img']);