在 VS 2015 中使用 Gulp 编译 TypeScript 升级到 VS2015 之后， TypeScript 文件不能自动编译成 js 文件， 要编译项目才能讲所有的 ts 文件 编译成 js...文件， 不过 VS2015 支持 Gulp ， 而 Gulp 有 TypeScript 插件， 这样使用 Gulp 自动编译 ts 文件的方法就可以实现了。...": "^2.10.0", "typescript": "^1.7.5" } } 保存文件， VS 会自动下载相应的 NPM 包; 2、 定义编译 ts 任务 打开 gulpfile.js...； 3、 实现自动编译 但是每次都运行这个任务还是太麻烦了， 我们的目标是能够自动编译 ts 文件， 这就需要使用 gulp.watch 了， 当 app 目录发生变化时， 就调用上面的 tsc 编译一下...最终的 gulpfile.js 内容如下： var gulp = require('gulp'); var ts = require('gulp-typescript'); var tsProj = ts.createProject
gulp的环境配置和安装：http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇gulpfile.js的配置，用于自动化编译sass和pug文件用...： 1 var gulp = require('gulp'); 2 var pug = require('gulp-pug'); 3 var sass = require('gulp-sass')...; 4 var rename = require('gulp-rename'); 5 var notify = require('gulp-notify'); 6 var plumber = require...(paths.css)) 40 }); 41 42 gulp.task('watch', ['sass'], function () { 43 gulp.watch(paths.pugWatch2...'pug' ]); 没有热更新和浏览器自动刷新功能，只是适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug改名功能。
toc AngularJS项目中js众多，上线的时候压缩合并下还是很有必要的^_^ 在此之前如果不了解gulp，推荐访问Gulp开发教程（翻译）。...的插件，因此顺理成章： var gulp = require('gulp'); var ngAnnotate = require('gulp-ng-annotate'); var gutil = require...('gulp-concat'); var minifyCss = require('gulp-minify-css'); var rename = require('gulp-rename');...'); gulp.task('minify', function() { return gulp.src(['js/appService.js','js/app.js']) //注意...')) .pipe(gulp.dest('js/')) });
": "^1.1.0" } } gulpfile.js var gulp = require('gulp'), jade = require('gulp-jade'), browserify....jade') .pipe(jade()) .pipe(gulp.dest('builds/development')) }) gulp.task('js', function...() { return gulp.src('src/js/main.js') .pipe(browserify({debug: true})) .pipe(gulp.dest.../main.js') $ gulp jade [21:35:30] Using gulpfile ~/17lai/frontend-workflow/gulpfile.js [21:35:30] Starting.../gulpfile.js [21:35:56] Starting 'js'... [21:35:56] Finished 'js' after 84 ms gulp API 文档 http://www.gulpjs.com.cn
其中涉及到的就是本文所言的在Gulp 工作流中Sass 增量编译功能的探索。...初级玩家的玩法 Gulp 工作流中集成Sass 编译一般都是用gulp-sass 这个模块，本质上gulp-sass 调用的是node-sass（C++ 版的Sass）。...熟悉Gulp 的都知道，默认的话Sass 中都是全量编译的，小项目玩家或初级玩家一般直接这么写： var gulp = require('gulp'); var sass = require('gulp-sass...true; //your watch functions... }); Gulp 4 中的增量编译 上面的这套方案执行后，我们在执行Gulp 进程中，除第一次第二次，从第三次编译开始就是增量编译了...于是，我们的gulpfile.js 中，核心代码部分是类似下面这样的： // https://devework.com/sass-incremental-builds-in-gulp.html function
---- 安装 Gulp.js Gulp.js 是基于 Node 的构建工具，类似 Grunt, 要使用它，你的机器上需要装有 Node.js。...gulp.task('default', ['js']); 完整的 gulpfile.js: // 定义依赖项和插件 var gulp=require('gulp'), gutil=require...gulp.task('js', function(){ gulp.src('..../js')); }); // 定义默认任务 gulp.task('default', ['js']); 回到命令行（项目根目录），输入 gulp, 回车。.../js/*.js', ['js']); 这行代码执行时， Gulp 会持续监控 ./js/ 目录下所有的 js 文件，一旦文件发生变化，就会自动重新执行 "js" 任务来合并和压缩文件。
基于Node.js的自动化工具Gulp What is gulp?...gulp的使用 1.建立gulpfile.js文件 gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。...工作方式 在介绍gulp API之前，我们首先来说一下gulp.js工作方式。...].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js 获取流 gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(...var gulp = require('gulp'); gulp.src('script/jquery.js') // 获取流 .pipe(gulp.dest('dist/foo.js
g 全局安装gulp gulp --help 返回帮助信息 package.json npm init 初始化npm npm install gulp gulp-util...--save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello',...save-dev gulp.task('myjs', function () { return gulp.src(['js/a.js','js/b.js']).pipe(concat(‘ab.js’.../xiangmu/js'); }); Js压缩文件 npm install gulp-uglify --save-dev gulp.task('uglifyjs', function(){ gulp.src...('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js')) }); Css文件压缩 npm install gulp-minify-css --save-dev
预编译前奏 1，任何变量未经声明就赋值，此变量就为全局对象所有 a = 123 console.log(a); // 123 var a = b = 123 console.log(a, b);...console.log(a); //报错Uncaught ReferenceError: a is not defined console.log(window.a); // undefined 预编译...预编译发生在函数执行的前一刻 1，创建AO对象 2，找形参和变量声明，将变量和形参名作为AO属性名，值为undefined 3，将实参值和形参统一 4，在函数体里面找函数声明，值赋予函数体 function...var b = function () { } console.log(b) //function () { } function d() { }; } /* ***预编译阶段...console.log(b); //2 function b() { } function d() { } console.log(b); //2 } /* ***预编译阶段
js预编译 创建AO对象 找函数形参和变量声明，值给undefined 实参形参统一 在函数体里面找函数声明，值赋予函数体 function fn(a){ console.log(a); //在AO...里找值--->输出 function a() {} var a = 123; //预编译将 var a,提升上去了，执行 a = 123;修改AO中a的值 console.log(a); /.../输出 123 function a() {} //预编译读过，不再读 console.log(a); //输出 123 var b = function() {} //函数表达式，将
首先，gulp的源码里没有任何一部分是定义pipe的。 gulp的pipe方法是来自nodejs stream API的。 gulp本身是由一系列vinyl模块组织起来的。...pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流...这里面的思想跟可以阅读参考资料 http://www.zhangxinxu.com/wordpress/2013/02/js-currying/ http://www.cnblogs.com/kunhu...方法只负责返回这个管道结构（Stream对象） 楼主想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可 Stream与File 注意的是gulp...里的流的file必须是vinyl对象 var File = require("gulp-utils").File //或者 var File = require("vinyl") var myf =
结构说明 assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API gulp 的使用 安装 node 环境 (自行 goole 即可) 全局安装...gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del sass的编译 (`gulp-ruby-sass`) 自动添加...css前缀（`gulp-autoprefixer`） 压缩css（`gulp-minify-css`） js代码校验（`gulp-jshint`） 合并js文件（`gulp-concat`） 压缩js代码...运行 task 任务 $ gulp 监听文档实现实时编译 $ gulp watch gulp 的 API 请查看 gulpfile.js 文件 scss 文件规范以及说明 各个小模块以下划线开头全小写命名...以该模块文件夹命名，在其中导入需要的小模块 (详细规则请查看 font-awesome 的 scss 源码，更多内容 google 脑补) 例： _path.scss 路径配置文件，_mixins.scss 预编译文件
文章目录 ✔️前言 内容 作用域 `global`、`window`、`document`的区别 预编译 1.前奏 2.四部曲 3.全局对象 1.预编译部分 2.详细介绍——IIFE 总结 ✔️前言...本篇给大家带来js语法核心基础之预编译的讲解 内容 作用域 JS有两种作用域：全局作用域和函数作用域 内部的作用域能访问外部，反之不行；访问时从内向外依次查找 如果在内部的作用域中访问了外部，则会产生闭包...） 闭包是由作用域产生的一种现象 JS 中所有函数都是闭包 内部作用域能访问的外部，取决于函数定义的位置，和调用无关 作用域内定义的变量、函数声明会提升到作用域顶部——预编译；在JS中只有var和function.../js/1.js"> //1.js var uncover = (function () { var a = 1; // 避免污染 var
Gulp是一个模块化打包工具。 Gulp本身只有几个入口，支持他拥有强大功能的是各种各样的插件。...下面记录一下Gulp的API以及一些用到的插件。...请查看上述的 gulp.src 来了解更多信息。...eg: var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event)...('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running
/bunld/js/bundle.min.js 运行命令 gulp 返回如下 $ gulp [08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js...hello'... hello [08:51:09] Finished 'hello' after 1.65 ms [08:51:09] Finished 'default' after 21 ms 编译.../build/1js')) done(); } sourcemap 当我们执行编译时，如果代码有错会非常不利于调试，因为代码都变成一行了 解决办法是通过sourcemap。...sourcemap保留了之前编译的代码使代码容易调试，当出错时浏览器会通过sorcemap恢复源代码并定位错误 cnpm i gulp-sourcemaps -D const gulp = require...gulp-uglify gulp-concat gulp-rename * sourcemap 保留了之前编译的代码使代码容易调试 * 出错，浏览器通过sorcemap恢复源代码 * cnpm
gulp本地版本和全局版本 解决方法： gulp4.0.0更新变动较大，可以考虑把本地版本和全局版本都切回3.9.1版本。...也有其他解决方法，详见参考文章2. npm install --save-dev gulp@3.9.1 npm install -g gulp@3.9.1 参考文章： gulp和gulp-cli的区别...Gulp error: gulp.hasTask is not a function Mismatch in gulp local and CLI versions 2. gulp-uglify压缩js...文件时报错之 punc(() 报错内容： gulp SyntaxError: Unexpected token: punc (() 问题分析： 这种大多是js代码中包含ES6语法的函数声明方式。...3. gulp-uglify压缩js文件时报错之 Unexpected token name 报错内容： _Unexpected token name «p», expected punc « 问题分析
js执行过程 1. 检查通篇的语法错误 1.5. 预编译的过程 2....var a =10; var a=function(){ } } var a = 1; 打印结果 ：函数 a 原因：变量提升优先与函数提升，故函数覆盖了变量的提升，结果为函数a 0 2 预编译法则...GO global object 全局上下文 GO：在整个通篇的JS执行之前，产生的一个GO对象 预编译过程： 寻找变量声明 寻找函数声明 执行 其实GO就是window（window在存储全局变量的时候也是这么存的...） AO activation object 函数上下文 AO：在函数执行之前，产生的一个AO对象 预编译步骤： 寻找函数里面的形参和变量声明，放到AO里面（变量声明的提升） 实参值赋值给形参 找函数声明并赋值函数体
为什么要使用Gulp 在前端开发中通常需要做，预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作，而使用Gulp可以自动化的完成这些工作，从而提高网站的开发效率，在我的博客使用Less...中介绍了将Less文件编译成CSS文件的方法，仔细观察可以看到如果按照博客中介绍的方法，在编译多个Less文件或者编译不同文件夹下的Less文件时需要执行多次Less文件编译命令，而使用Gulp可以一次性完成这些操作...Gulp是什么 Gulp是一个可以自动化完成我们开发过程中大量的重复工作的工具，使用Gulp可以自动化的完成如，预处理语言的编译、js文件的压缩、css文件的压缩、html文件的压缩、图片体积优化等工作...npm install --save-dev gulp 7.创建一个Gulp的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp...的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务 gulp.task('copy
（9）Gulp插件 gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify...：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 6、package.json （1）node_modules文件夹的问题 文件夹以及文件过多过碎...install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中 { "devDependencies": { "gulp
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程：文件流--文件流--文件流......因为grunt操作会创建临时文件，会有频繁的IO操作，而gulp使用的是流操作...{ "name": "gulpjs", "version": "0.0.1", "description": "Gul pcourse by link", "main": "app.js...install --save gulp-ruby-sass //sass npm install --save gulp-jshint //js代码检测 npm install --save gulp-uglify...//js压缩 npm install --save gulp-concat //文件合并 npm install --save gulp-rename //文件重命名 npm install --save...q=gulp
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
