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
基于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
---- 安装 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" 任务来合并和压缩文件。
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
首先，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 $ npm install gulp -g 进入到需要 gulp 管理的项目路径，如 /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...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 文件规范以及说明 各个小模块以下划线开头全小写命名
Gulp是什么 Gulp是一个可以自动化完成我们开发过程中大量的重复工作的工具，使用Gulp可以自动化的完成如，预处理语言的编译、js文件的压缩、css文件的压缩、html文件的压缩、图片体积优化等工作...Gulp的特性 易于使用 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理 构建快速 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作 插件高质 Gulp...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...的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); var less = require('gulp-less
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
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 « 问题分析
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。...1.基本使用 npm i gulp-cli -g npm i gulp -D cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下 const...; function build(done) { gulp.src(['src/test/**/*.js']) //src/js目录下所有js文件.../bunld/js/bundle.min.js 运行命令 gulp 返回如下 $ gulp [08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js.../src/*.js', js) //重新加载对应文件 gulp.watch(['./src/*.js','.
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
（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-file-include 是gulp的插件，所以需要先安装gulp npm install -g gulp npm install gulp --save-dev npm install...name @@age @@socials.fb @@socials.tw gulpfile.js...-g 2.安装md插件 > npm install markdown gulpfile.js const fileinclude = require('gulp-file-include'); const...some.html', { "nav": true }) @@if (name === 'test' && nav === true) { @@include('test.html') } gulpfile.js...使用 index.html @@for (var i = 0; i < arr.length; i++) { `+arr[i]+` } gulpfile.js
开发流程 参考了几篇博客 Gulp插件制作指南 Gulp：插件编写入门 先来看一下插件的全部代码 'use strict'; var gutil = require('gulp-util'); var...var gulp = require('gulp'); var replace = require('gulp-url-replace') gulp.task('move', function(){...public/img/', 'css/': '/node/public/css/', 'js.../': '/node/public/js/', })) .pipe(gulp.dest(".....github上 gulp-url-replace
前端编译js时使用了gulp、babel、browserify、babelify，编译css时使用了less，使用gulp-connect作为开发服务器。...gulp编译脚本 gulpfile.js const gulp = require('gulp'); const browserify = require('browserify'); const errorify...(buildJsPath)); }; gulp.task('buildjs_' + pageName, buildjs); // 这样你就可以运行 `gulp js`...); gulp.watch([path.join(buildJsPath, '**/*_bundle.js'), path.join(buildCssPath, '**/*_bundle.css...这样一分析，整个gulpfile.js就比较简单了。gulp的用法还是比较简单的，可参考中文文档。
这个文件保存项目的相关信息 第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...文件 然后安装js代码检测插件，压缩文件插件，重名名插件(这里只讲一下这三个插件的使用，当然gulp还有很多强大的插件) js代码检测插件： npm install gulp-jslint –save-dev...jslint 然后在gulpfile.js文件里面编写gulp任务代码 var gulp = require("gulp"), jshint = require("gulp-jshint"),...uglify = require("gulp-uglify"), rename = require("gulp-rename"); gulp.task("scripts",function...(){ return gulp.src("src/calendar.js") .pipe(jshint()) //检查代码 .pipe(jshint.reporter
监听任务 依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename.../src/css/', "js":'./src/js/*.js', "images":'./src/images/', "css_dist":'..../dist/css/', "js_dist":'./dist/js/', "images_dist":'....)) .pipe(bs.stream()); }); //监听处理js的文件任务 gulp.task('js',function(){ gulp.src(paths.js+"*.js") .pipe...,['html']); gulp.watch(paths.css+"*.scss",['css']); gulp.watch(paths.js+"*.js",['js']); gulp.watch
Gulp学习笔记 1. 安装 Gulp.js npm install -g gulp 2....('gulp-concat'); // 定义名为 "js" 的任务 gulp.task('js', function(){ gulp.src('..../js/*.js') .pipe(uglify()) .pipe(concat('all.js')) .pipe(gulp.dest('..../js')); // 自动检查指定的资源的变化 gulp.watch('..../js/*.js', ['js']); }); // 定义默认任务 gulp.task('default', ['js']); 3. 运行 gulp
/js/*.js') // * 匹配js文件夹下所有.js格式的文件 gulp.src('..../js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹 gulp.src(['./js/*.js','!./js/index.js']) // !...匹配除了index.js之外的所有js文件 gulp.src('..../js/*.js') .pipe(concat('all.js')) // 合并all.js文件 .pipe(gulp.dest('..../dist')); gulp.src(['./js/demo1.js','./js/demo2.js','.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
