标签：压缩js 查看 pack -name http turn browser 下载地址 16px
前言
现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。
在gulp安装之前，必须先要有node的环境，因为gulp.js是基于node.js的。
所以先来安装node (如果你已经有node环境了就可以跳过此布)
node安装
? Node.js安装包及源码下载地址为https://nodejs.org/en/download/ node安装教程很多，此处不详述
?安装完成之后
? 在命令行输入
node -v
查看安装版本
npm -v
查看npm 版本
gulp安装
有了npm之后就可以执行
npm install gulp -g
就可以自如的使用gulp了
?? 创建一个项目
1.监听服务器文件
1 gulp.task(‘serve‘,(cb)=>{ 2 if(!args.watch) return cb(); 3 var server = liveserver.new([‘--harmony‘,‘server/bin/www‘]); 4 server.start(); 5 gulp.watch([‘server/public/**/*.js‘,‘server/views/**/*.ejs‘],function (file) { 6 server.notify.apply(server,[file]); 7 }) 8 //监听需要重启的文件 9 gulp.watch([‘server/routes/**/*.js‘,‘server/app.js‘],function () { 10 server.start.bind(server)() 11 }); 12 }) 13 14 此处需要引入一些包 15 import gulp from ‘gulp‘; 16 import gulpif from ‘gulp-if‘; 17 import liveserver from ‘gulp-live-server‘;
2.监听css文件
gulp.task(‘css‘,()=>{
return gulp.src(‘app/**/*.css‘)
.pipe(gulp.dest(‘server/public‘))
.pipe(gulpif(args.watch,livereload()))
})
此处需要引入一些包
import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import livereload from ‘gulp-livereload‘;
3.监听浏览器
import gulp from ‘gulp‘; import gulpif from ‘gulp-if‘; import gutil from ‘gulp-util‘; import args from ‘./util/args‘; gulp.task(‘browser‘,(cb)=>{ if(!args.watch) return cb(); gulp.watch(‘app/**/*.js‘,[‘scripts‘]); gulp.watch(‘app/**/*.ejs‘,[‘pages‘]); gulp.watch(‘app/**/*.css‘,[‘css‘]); });
4.监听js
//引入一些包 import gulp from ‘gulp‘; import gulpif from ‘gulp-if‘; import concat from ‘gulp-concat‘; //文件拼接 import webpack from ‘webpack‘; //打包 import gulpWebpack from ‘webpack-stream‘; import named from ‘vinyl-named‘; //重命名 import livereload from ‘gulp-livereload‘; //自动刷新 热更新 import plumber from ‘gulp-plumber‘; //处理文件信息流 import rename from ‘gulp-rename‘; //重命名 import uglify from ‘gulp-uglify‘; //压缩js css import {log,colors} from ‘gulp-util‘; //命令行输出 import args from ‘./util/args‘; //对命令行参数进行解析 //创建一个任务 gulp.task(‘scripts‘,()=>{ //打开 return gulp.src([‘app/js/index.js‘]) //处理错误 .pipe(plumber({ errorHandle:function () { } })) .pipe(named()) .pipe(gulpWebpack({ module:{ loaders:[{ test:/\.js$/, loader:‘babel-loader‘ }] } }),null,(err,stats)=>{ log(`Finished ‘${colors.cyan(‘scripts‘)}‘`,stats.toString({ chunks:false })) }) //指定路径 .pipe(gulp.dest(‘server/public/js‘)) //重命名 .pipe(rename({ basename:‘cp‘, extname:‘.min.js‘ })) //压缩 .pipe(uglify({compress:{properties:false},output:{‘quote_keys‘:true}})) .pipe(gulp.dest(‘server/public/js‘)) .pipe(gulpif(args.watch,livereload())) })
当然还有许多监听，此处不一一例举，但是思想则是相通的。
对于以上的监听，有必要说明一下，在安装包时 均使用
npm install *** --save-dev
在安装过程中可通过package.json查看变化。
标签：压缩js 查看 pack -name http turn browser 下载地址 16px
原文地址：https://www.cnblogs.com/xinruanbaba/p/9095843.html
