Gulp是什么?

Gulp是前端自动化的工具,但Gulp能用来做什么

1.搭建web服务器

2.使用预处理器Sass,Less

3.压缩优化,可以压缩JS CSS Html 图片

4.自动将更新变化的代码实时显示在浏览器

5.前端测试

......

这些都不是他的全部功能,社区丰富的插件,为他提供了强大的后盾。

首先下载gulp(前提默认你安装好了node,先 npm install,创建一个package.json)

  1. npm install gulp -g //全局安装
  2. npm install gulp --save-dev //本地安装并加入package.json

一、安装各种神奇的插件

接下来安装各种需要的插件:

  1. npm install babel-core babel-preset-es2015 browser-sync gulp gulp-autoprefixer gulp-babel gulp-cache gulp-clean gulp-cssnano gulp-htmlmin gulp-if gulp-imagemin gulp-load-plugins gulp-plumber gulp-sass gulp-size gulp-sourcemaps gulp-uglify gulp-useref gulp-rev-append main-bower-files wiredep --save-dev

各种插件按需求自己选择,各自功能如下:

1.babel-core babel-preset-es2015 gulp-babel   用于解析es6转换为es5

2.browser-sync  服务器同步浏览

3.gulp-autoprefixer  根据设置浏览器版本自动处理浏览器前缀

4.gulp-cache  图片快取,只有更改过得图片会进行压缩

5.gulp-clean 清空文件夹

6.gulp-cssnano 压缩CSS代码

7.gulp-htmlmin 压缩html

8.gulp-if 用于判断

8.gulp-imagemin 图片压缩

9.gulp-load-plugins 自动加载(超级有用 省去一大堆代码)

10.gulp-plumber 管道工 不会让错误爆出来 继续执行

11.gulp-sass 预编译Sass

12.gulp-size 统计管道里面内容的大小的,上面是用它来显示出压缩前后的大小用来对比用

13.gulp-sourcemaps 当压缩的JS出错,能根据这个找到未压缩代码的位置 不会一片混乱代码

14.gulp-uglify JS压缩

15.gulp-useref 将html引用顺序的CSS JS 变成一个文件

例如:<!-- build:js scripts/main.js --> <script src="1.js"></script><script src="2.js"></script><!--endbuild--> 最后变成<script src="main.js"></script>

16.gulp-rev-append html引用添加版本号

17.main-bower-files 找到bower.json里配置的 overrides 下配置的main下的路径

18.wiredep 在.html文件会把默认bower.json的配置自动注入到下面标签中去 <!-- bower:js --> <!-- endbower --> <!-- bower:css--> <!-- endbower -->

接下来是用 bower安装 Jquery bootstrap-sass

  1. bower init //新建bower.json
  2. bower install jquery bootstrap-sass --save-dev //安装jquery bootstrap

二、get Gulp的简单语法

1.gulp.task(name[,deps],fn)

说明:定义一个gulp任务

name: 类型(必填):String 指定任务的名称(不应该有空格)

deps:类型(可选):StringArray,该任务依赖的任务(执行name任务要先去执行的任务)

  1. gulp.task('A' , function(){
  2. console.log('A')
  3. });
  4. gulp.task('B' , ['A'] , function(){ //运行B之前先去运行A
  5. console.log('B')
  6. });

fn:类型(必填):Function 该任务调用的插件操作

2.gulp.src(globs[, options])

说明:src方法指定需要处理的源文件路径,返回当前文件流至可用插件

globs: 类型(必填):String/StringArray  需要处理的源文件匹配符路径

通配符路径匹配示例:

  “src/a.js”:指定具体文件;

  “*”:匹配所有文件    例:src/*.js(包含src下的所有js文件);

  “**”:匹配0个或多个子文件夹    例:src/**/*.js(包含src的0个或多个子文件夹下的js文件);

  “{}”:匹配多个属性    例:src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);

  “!”:排除文件    例:!src/a.js(不包含src下的a.js文件);

options:类型(可选):Object 三个属性 buffer read base

  options.buffer:类型:Boolean  默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;

  options.read:  类型:Boolean  默认:true 设置false,将不执行读取文件操作,返回null;

  options.base:  类型:String  设置输出路径以某个路径的某个组成部分为基础向后拼接

  1. gulp.src('client/js/**/*.js')
  2. .pipe(minify())
  3. .pipe(gulp.dest('build')); // Writes 'build/somedir/somefile.js'
  4.  
  5. gulp.src('client/js/**/*.js', { base: 'client' })
  6. .pipe(minify())
  7. .pipe(gulp.dest('build')); // Writes 'build/js/somedir/somefile.js'

3.gulp.dest(path[,options])

说明:处理完后文件输出的路径

path:类型(必填):String or Function 指定文件输出路径,或者定义函数返回文件输出路径亦可

options:  类型(可选):Object,有2个属性cwd、mode;

  options.cwd:  类型:String  默认:process.cwd():前脚本的工作目录的路径 当文件输出路径为相对路径将会用到;

  options.mode:  类型:String  默认:0777 指定被创建文件夹的权限;

4.gulp.watch(glob[,opts],tasks) or gulp.task(glob [,opts ,cd])

说明:watch方法用于监听文件变化,一被变化就执行指定任务

glob:  需要处理的源文件匹配符路径。类型(必填):String or StringArray;

opts:  类型(可选):Object 具体参看https://github.com/shama/gaze

tasks:  类型(必填):StringArray 需要执行的任务的名称数组;

cb(event):  类型(可选):Function 每个文件变化执行的回调函数;

三、目录

  1. |--gulp_test
  2. |--app //生产文件路径
  3. |--fonts
  4. |--images
    |--1.png
  5. |--scripts
    |--main.js
    |--index.js
  6. |--styles
    |--main.scss
    |--index.css
  7. |--index.html
  8. |--dist //发布文件路径
  9. |--fonts
  10. |--images
  11. |--scripts
  12. |--styles
  13. |--index.html
  14. |--bower_components
  15. |--bootstrap-sass
  16. |--jquery
  17. |--node_modules
  18. |--各种插件
  19. |--package.json
  20. |--bower.json

app是我们新建的目录和文件夹,其余是按照上面操作自动生成的。

首先在gulp_test下新建.babelrc (用于配置es6 语法) .bowerrc (用于定义bower的路径)两个文件

.babelrc

  1. {
  2. "presets": [
  3. "es2015"
  4. ]
  5. }

.bowerrc

  1. {
  2. "directory": "bower_components"
  3. }

设置一下bower.json

  1. {
  2. "name": "gulp_test",
  3. "authors": [
  4. "QRL"
  5. ],
  6. "keywords": [
  7. "bower_components"
  8. ],
  9. "private": true,
  10. "devDependencies": {
  11. "jquery": "^3.0.0"
  12. },
  13. "overrides": {
  14. "bootstrap-sass": {
  15. "main": [
  16. "assets/stylesheets/_bootstrap.scss",
  17. "assets/fonts/bootstrap/*",
  18. "assets/javascripts/bootstrap.js"
  19. ]
  20. }
  21. },
  22. "dependencies": {"bootstrap-sass": "^3.3.6"}
  23. }

app下的index.html内容

  1. <!doctype html>
  2. <html lang="">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="description" content="">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>test gulp webapp</title>
  8.  
  9. <link rel="apple-touch-icon" href="apple-touch-icon.png">
  10. <!-- Place favicon.ico in the root directory -->
  11.  
  12. <!-- build:css styles/index_main.css --> //这个注释的意思是 将两个css合并成一个index_main.css 注意顺序
  13. <link rel="stylesheet" href="styles/index.css">
  14. <link rel="stylesheet" href="styles/main.css">
  15. <!-- endbuild -->
  16. </head>
  17. <body>
  18.  
  19. <div class="container">
  20. <div class="header">
  21. <ul class="nav nav-pills pull-right">
  22. <li class="active"><a href="#">Home</a></li>
  23. <li><a href="#">About</a></li>
  24. <li><a href="#">Contact</a></li>
  25. </ul>
  26. <h3 class="text-muted">Hello</h3>
  27. </div>
  28.  
  29. <div class="jumbotron">
  30. <h1>Hello Gulp!</h1>
  31. <p class="lead">Always a pleasure scaffolding your apps.</p>
  32. <p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
  33. </div>
  34.  
  35. <div class="row marketing">
  36. <div class="col-lg-6">
  37. <h4>HTML5 Boilerplate</h4>
  38. <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
  39.  
  40. <h4>Sass</h4>
  41. <p>Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.</p>
  42.  
  43. <h4>Bootstrap</h4>
  44. <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
  45. <h4>Modernizr</h4>
  46. <p>Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.</p>
  47.  
  48. </div>
  49. </div>
  50.  
  51. <div class="footer">
  52. <p>♥ from the Yeoman team</p>
  53. </div>
  54. </div>
  55.  
  56. <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
  57. <script>
  58. (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  59. function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  60. e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  61. e.src='https://www.google-analytics.com/analytics.js';
  62. r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  63. ga('create','UA-XXXXX-X');ga('send','pageview');
  64. </script>
  65.  
  66. <!-- build:js scripts/vendor.js --> //将以下js合并成一个,并更名为vendor.js
  67. <script src="/bower_components/jquery/dist/jquery.js"></script>
  68. <!-- endbuild -->
  69.  
  70. <!-- build:js scripts/plugins.js --> //注意一下这里 待会会按照顺序变成一个plugins.js文件
  71. //是否遇到过这么多的插件引用,Ctrl+c Ctrl+v 还要细致的修改 请留意 wiredep 任务 留意下面的<!-- bower:js --><!-- endbower -->注释,这可不是随随便便的注释
  72. <!-- bower:js -->
  73. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js"></script>
  74. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js"></script>
  75. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js"></script>
  76. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
  77. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
  78. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js"></script>
  79. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js"></script>
  80. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js"></script>
  81. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js"></script>
  82. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js"></script>
  83. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"></script>
  84. <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script>
  85. <!-- endbower -->
  86. <!-- endbuild -->
  87.  
  88. <!-- build:js scripts/index_main.js -->
  89. <script src="scripts/index.js"></script>
  90. <script src="scripts/main.js"></script>
  91. <!-- endbuild -->
  92. </body>
  93. </html>

接下来最重要了,同样在gulp_test下新建gulpfile.babel.js(因为这里使用es6,所以需要将原本的gulpfile.js 更名为 gulpfile.babel.js )

四、开始gulp之旅

打开gulpfile.babel.js,开始操作

首先写进以下代码:

  1. import gulp from 'gulp'; //引入gulp
  2. import gulpLoadPlugins from 'gulp-load-plugins'; //自动加载插件 省去一个一个require进来
  3. import browserSync from 'browser-sync'; //浏览器同步
  4. import {stream as wiredep} from 'wiredep'; //把bower 下载的文件引入到html文件中
  5. const $ = gulpLoadPlugins();
  6. const reload = browserSync.reload;

接下来

先尝试删除dist文件夹  终端运行 "gulp clean"

  1. gulp.task('clean' , function(){
  2. return gulp.src([
  3. 'dist', //删除dist整个文件夹
  4. 'dist/test/**/*', //删除dist下的test写任意子文件夹里的文件
  5. '!package.json' //不删除package.json文件
  6. ] ).pipe($.clean());
  7. });

预编译Sass

  1. gulp.task('styles' , ()=>{
  2. return gulp.src('app/styles/*.scss') //指明源文件路径 读取其数据流
  3. .pipe($.plumber()) //替换错误的pipe方法 使数据流正常运行
  4. .pipe($.sourcemaps.init()) //压缩环境出现错误能找到未压缩的错误来源
  5. .pipe($.sass.sync({ //预编译sass
  6. outputStyle: 'expanded', //CSS编译后的方式
  7. precision: 10,//保留小数点后几位
  8. includePaths: ['.']
  9. }).on('error', $.sass.logError))
  10. .pipe($.autoprefixer({browsers:['> 1%', 'last 2 versions', 'Firefox ESR']})) //自动匹配浏览器支持的后缀
  11. .pipe($.sourcemaps.write('.')) //map文件命名
  12. .pipe(gulp.dest('dist/styles')) //指定输出路径
  13. });
    ../dist/styles目录下会生成 对应的 *.css *.css.map

转化es6的JS

  1. gulp.task('scripts' , ()=>{
  2. return gulp.src('app/scripts/**/*.js')
  3. .pipe($.plumber())
  4. .pipe($.sourcemaps.init())
  5. .pipe($.babel()) //靠这个插件编译
  6. .pipe($.sourcemaps.write('.'))
  7. .pipe(gulp.dest('dist/scripts'));
  8. });
  1. ../dist/scripts目录下会生成 对应的 *.js *.js.map

压缩图片

  1. gulp.task('images',()=>{
  2. return gulp.src('app/images/**/*')
  3. .pipe ($.cache ($.imagemin ({ //使用cache只压缩改变的图片
  4. optimizationLevel: 3, //压缩级别
  5. progressive: true,
  6. interlaced: true})
  7. )).pipe (gulp.dest ('dist/images'));
  8. });
    通过对比图片大小,可以看出压缩了多少

引用字体文件

  1. gulp.task('fonts', () => {
  2. return gulp.src(require('main-bower-files')('**/*. {eot,svg,ttf,woff,woff2}', function (err) {}) //main-bower-files会从bower.json文件里寻找定义好的主要文件路径
  3. .concat('app/fonts/**/*')) //将bootstrap-sass的fonts和app下我们自己选用的fonts合并起来
    .pipe(gulp.dest('dist/fonts')); });
  1. ../dist/fonts目录下会生成 对应的文件

接下来是最最有用的操作,将CSS合并压缩,JS合并压缩,html压缩,加上时间戳避免缓存

  1. gulp.task('html', ['styles' , 'scripts'], ()=>{ //先执行styles scripts任务
  2. var version = (new Date).valueOf() + '';
  3. var options = {
  4. removeComments: false,//清除HTML注释
  5. collapseWhitespace: true,//压缩HTML
  6. collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />
  7. removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />
  8. removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
  9. removeStyleLinkTypeAttributes: false,//删除<style>和<link>的type="text/css"
  10. minifyJS: false,//压缩页面里的JS
  11. minifyCSS: false//压缩页面里的CSS
  12. };
  13. return gulp.src('app/*.html')
  14. .pipe($.plumber())
  15. .pipe($.useref({searchPath: ['app', '.']})) //将页面上 <!--endbuild--> 根据上下顺序合并
  16. .pipe($.if('*.js', $.uglify()))
  17. .pipe($.if('*.css', $.cssnano()))
  18. .pipe($.if('*.html', $.htmlmin(options)))
  19. .pipe($.replace('.js"></script>' , '.js?v=' + version + '"></script>')) //这种方法比较不成熟 每一次的任务都会改变,不管文件是否被修改
  20. .pipe($.replace('.css">' , '.css?v=' + version + '">'))
  21. .pipe(gulp.dest('dist'));
  22. });

查看dist/index.html , 是否还记得

是不是瞬间被吓到了,再也不用一个个压缩JS文件,再也不要担心缓存这种问题,再也不用因为页面的臃肿而烦恼,几行配置,一键搞定。

优化上面的引用加版本号: 使用插件 gulp-rev-append

  1. import rev from 'gulp-rev-append'
  2.  
  3. gulp.task('html', ['styles' , 'scripts'], ()=>{ //先执行styles scripts任务
  4.  
  5. return gulp.src('app/*.html')
  6. .pipe($.plumber())
  7. .pipe($.useref({searchPath: ['app', '.']})) //将页面上 <!--endbuild--> 根据上下顺序合并
  8. .pipe($.if('*.js', $.uglify()))
  9. .pipe($.if('*.css', $.cssnano()))
  10. .pipe(rev()) //为引用添加版本号
  11. .pipe($.if('*.html', $.htmlmin(options)))
  12. .pipe(gulp.dest('dist'));
  13. });

同时需要在index.html的引用后面加上 ?rev=@@hash

  1. <script src="scripts/index.js?rev=@@hash"></script>

添加后的效果

  1. <script src="scripts/index.js?rev=200c90563a2be0adfd8c03f8e4162df7"></script>

最重要是只要app/index.js里不发生改变,这个版本号就不会变化。

接下来再学一个黑魔法——本地建站和自动刷新

  1. gulp.task('serve', ['styles','scripts','fonts'] , ()=>{
  2. browserSync({
  3. notify : false,
  4. port:9000, //端口号
  5. server:{
  6. baseDir:['dist'], //确定根目录
  7. routes:{
  8. '/bower_components': 'bower_components'
  9. }
  10. }
  11. });
  12.  
  13. gulp.watch([ //监测文件变化 实行重新加载
  14. 'app/*.html',
  15. 'app/images/**/*'
  16. ]).on('change',reload);
  17.  
  18. gulp.watch('app/styles/**/*.scss' , ['styles']); //监测变化 执行styles任务
  19. gulp.watch('app/scripts/**/*.js' , ['scripts']);
  20. gulp.watch('app/fonts/**/*' , ['fonts']);
  21. gulp.watch('bower.json' , ['wiredep','fonts']);
  22. });

终端一运行gulp serve 浏览器直接打开dist下的index.html,只要一修改监测的文件,浏览器立即刷新。

小插曲:接下来解决 wiredep 任务,这个插件主要是用在bower下载文件,方便页面引用文件

首先在app下新建一个 index_test.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6.  
  7. <!--bower:css-->
  8. <!--endbower-->
  9. </head>
  10. <body>
  11. <p>Hellp wirdep</p>
  12. <a href="index.html">dianwo</a>
  13. <!-- bower:js -->
  14. <!-- endbower -->
  15. </body>
  16. </html>

然后在gulpfile.babel.js中写上任务

  1. gulp.task('wiredep_test' , function(){
  2. gulp.src('./app/index_test.html')
  3. .pipe(wiredep({
  4. optional:'configuration',
  5. goes : 'here',
  6. ignorePath:/^(\.\.\/)+/ //生成的路径忽略../
  7. }))
  8. .pipe(gulp.dest('./app')) //输出到原路径
  9. });

然后运行一下,index_test.html 原本的<!-- bower:js --> <!-- endbower --> 变成

  1. <!-- bower:js -->
  2. <script src="bower_components/jquery/dist/jquery.js"></script>
  3. <script src="bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
  4. <!-- endbower -->

你或许很疑惑这是根据什么自动查找生成的啊?因为没有中文文档,自己摸索后是在bower.json里面配置的,review一下刚才的bower.json

  1. "devDependencies": {
  2. "jquery": "^3.0.0"
  3. },
  4. "overrides": {
  5. "bootstrap-sass": {
  6. "main": [
  7. "assets/stylesheets/_bootstrap.scss",
  8. "assets/fonts/bootstrap/*",
  9. "assets/javascripts/bootstrap.js"
  10. ]
  11. }
  12. },
  13. "dependencies": {"bootstrap-sass": "^3.3.6"}

根据以上三个根据,起最大作用的是overrides,最终会根据这些进行生成。

可以稍微测试一下,将bower.json做点小修改 ,增加jquery的选择

  1. "overrides": {
  2. "bootstrap-sass": {
  3. "main": [
  4. "assets/stylesheets/_bootstrap.scss",
  5. "assets/fonts/bootstrap/*",
  6. "assets/javascripts/bootstrap.js"
  7. ]
  8. },
  9. "jquery" :{
  10. "main":[
  11. "src/*.js"
  12. ]
  13. }
  14. }

回头看看index_test.html  刚才的jquery.js 被src下的js代替

  1. <!-- bower:js -->
  2. <script src="bower_components/modernizr/modernizr.js"></script>
  3. <script src="bower_components/jquery/src/ajax.js"></script>
  4. <script src="bower_components/jquery/src/attributes.js"></script>
  5. <script src="bower_components/jquery/src/callbacks.js"></script>
  6. <script src="bower_components/jquery/src/core.js"></script>
  7. <script src="bower_components/jquery/src/css.js"></script>
  8. <script src="bower_components/jquery/src/data.js"></script>
  9. <script src="bower_components/jquery/src/deferred.js"></script>
  10. <script src="bower_components/jquery/src/deprecated.js"></script>
  11. <script src="bower_components/jquery/src/dimensions.js"></script>
  12. <script src="bower_components/jquery/src/effects.js"></script>
  13. <script src="bower_components/jquery/src/event.js"></script>
  14. <script src="bower_components/jquery/src/jquery.js"></script>
  15. <script src="bower_components/jquery/src/manipulation.js"></script>
  16. <script src="bower_components/jquery/src/offset.js"></script>
  17. <script src="bower_components/jquery/src/queue.js"></script>
  18. <script src="bower_components/jquery/src/selector-native.js"></script>
  19. <script src="bower_components/jquery/src/selector-sizzle.js"></script>
  20. <script src="bower_components/jquery/src/selector.js"></script>
  21. <script src="bower_components/jquery/src/serialize.js"></script>
  22. <script src="bower_components/jquery/src/traversing.js"></script>
  23. <script src="bower_components/jquery/src/wrap.js"></script>
  24. <script src="bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
  25. <!-- endbower -->

最后一步,就结束了

  1. gulp.task('build' , ['html' , 'images' , 'fonts'],()=>{
  2. return gulp.src('dist/**/*')
  3. .pipe($.size({title:'build' , gzip:true}));
  4. });
  5.  
  6. gulp.task('default' ,['clean'],()=>{
  7. gulp.start('build');
  8. });

这就是单独运行 gulp 就会执行default 然后执行我们想要的操作,同时可以根据size看到压缩后节省的空间。

感谢您坚持看完,一步步跟着做,你会发现gulp原来辣么容易,前端自动化工具辣么方便。

对于老项目也可以这样一步一步改造哦!

声明:上述的 二、get Gulp的简单语法 摘抄于 Gulp中文网的API文档 。其余内容均属楼主一点一滴码出来的。

前端自动化gulp遇上es6从 无知到深爱的更多相关文章

  1. gulp前端自动化构建并上传oss

    前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gu ...

  2. 前端自动化-----gulp详细入门(转)

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  3. 前端自动化Gulp工具常用插件

    npm init命令初始化当前文件夹后,在当前文件夹新建gulpfile.js文件.当前目录下的所有操作流都在gulpfile.js文件中定义. gulp自动化 gulp-uglify (JS压缩) ...

  4. 前端自动化gulp使用方法

    gulp介绍 1. 网站: http://slides.com/contra/gulp#/ 2. 特点 易于使用:通过代码优于配置的策略, Gulp 让简单的任务简单,复杂的任务可管理. 构建快速 : ...

  5. 前端自动化-gulp入门

    前不久本人写了一篇关于gulp安装和配置的文章,其实当时还是懵逼的状态,但是今天再次温习了一遍,感觉对整个流程有个整体的理解了,下面以一个实例给大家分享下我的经验供参考和学习. 1.首先安装nodej ...

  6. 前端自动化工具 -- gulp https://angularjs.org/

    gulp是基于流的前端自动化构建工具. gulp是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 二.基本用法--插件使用 gu ...

  7. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  8. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  9. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

随机推荐

  1. Android网络请求的时候报错 Connection refused 处理

    在用Android测试JSON数据解析的时候,报了这样一个异常: java.net.ConnectException: localhost/ - Connection refused 原来模拟器默认把 ...

  2. CSS知识之 background-position 用法详细介绍

    一.语法 background-position : length || length background-position : position || position 二.取值 length   ...

  3. ES6中函数的扩展

    一.设置默认参数 ES6之前,给函数设置默认参数是这样做的: function fn(a) { if(typeof y === undefined){ a = a || 'hello'; } cons ...

  4. Maven命令创建java项目

    ------------------------------java项目搭建--------------------------- 使用Maven构建一个简单的Java项目 1.进入命令行,执行下面的 ...

  5. uva 10683 Fill

    https://vjudge.net/problem/UVA-10603 题意: 倒水问题,输出最少的倒水量和目标水量 如果无解,目标水量就是尽可能接近给定点的目标水量,但不得大于给定的目标水量 推推 ...

  6. 51Nod 1347 旋转字符串 | 规律

    Input示例 aa ab Output示例 YES NO 规律:abcabc 只需判断原始字符串 #include <bits/stdc++.h> using namespace std ...

  7. bzoj 2038 莫队入门

    http://www.lydsy.com/JudgeOnline/problem.php?id=2038 题意:多次询问区间内取出两个相同颜色的种类数 思路:由于不是在线更新,那么可以进行离线查询,而 ...

  8. 【C++对象模型】第六章 执行期语意学

    执行期语意学,即在程序执行时,编译器产生额外的指令调用,确保对象的构造,内存的释放,以及类型转换与临时对象的生成的安全进行. 1.对象的构造和析构 对于类对象的构造,一般在定义之后则开始内部的构造过程 ...

  9. PowerDesigner16 状态图

    状态图(Statechart Diagram)主要用于描述一个对象在其生存期间的动态行为,表现为一个对象所经历的状态序列,引起状态转移的事件(Event),以及因状态转移而伴随的动作(Action). ...

  10. 9、MySQL常见的函数?

    请参考下面的博客文章: MySQL常见的函数