gulp | 易学教程

Compile JavaScripts with Gulp and Resolve Dependencies (separate files)

阅读更多关于 Compile JavaScripts with Gulp and Resolve Dependencies (separate files)

问题 I want to compile JavaScript files with Gulp. I have a src directory where all scripts are present with .js extension. I want all scripts to be compiled separately and placed into a destination directory ( dist ) with the same filename as the original. Consider this example: src/jquery.js : /** * @require ../../vendor/jquery/dist/jquery.js */ src/application.js : /** * @require ../../vendor/angular/angular.js * @require ../../vendor/ngprogress-lite/ngprogress-lite.js * @require ../../vendor

Using Gulp how to first compile Typescript then concatenate the result and uglify it?

阅读更多关于 Using Gulp how to first compile Typescript then concatenate the result and uglify it?

问题 I'm working on a project using Typescript currently I'm facing a problem compiling Typescript and then concatenate the result using Gulp . var gulp = require('gulp'); var ts = require('gulp-typescript'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); gulp.task('default', function () { gulp.src('vendor/**/*.js') // I want to add ts files then combile and concat .gulp.src('src/**/*.ts') .pipe(sourcemaps.init()) .pipe(ts({ noImplicitAny: true, out: 'output.js' }))

Gulp error: Path must be a string

阅读更多关于 Gulp error: Path must be a string

问题 I've got a problem with gulp.js. Steps to reproduce: $ composer global require "laravel/installer=~1.1" $ laravel new myproject $ cd myproject $ php artisan serve $ npm install $ npm rm bootstrap-sass —save $ npm install foundation-sites —save $ npm install motion-ui —save then I copy _settings.scss from node_modules/foundation-sites/scss/settings to resources/assets/sass in app.scss then i put every Foundation import and finally I write Elixir task as reported here: http://zecipriano.com/en

Remove windows file readonly attribute in gulp file

阅读更多关于 Remove windows file readonly attribute in gulp file

问题 How can we remove readonly attribute from all files under a folder in Windows? UPDATE : The question is more about how to remove readonly attribute using gulpfile 回答1: I figured out the answer: To remove readonly attribute of all files under a directory recursively, we run the following command in windows Command line attrib -r <dir-name>\*.* /s Following gulp task removes readonly attribute of all files under gulp.task('remove-readonly-attributes', function() { require("child_process").exec(

gulp 使用初解

阅读更多关于 gulp 使用初解

#gulp gulp是基于Node.js的前端自动化构建工具，主要用于代码打包。目前主流的前端打包工具，grunt，gulp，webpack。grunt现在似乎慢慢被gulp取代，而我使用gulp也是冲着大家说的配置简单去的，至于通道流，运行文件什么的其实还是次要的；webpack现在很火，听说功能强大，没有用过。 npm install gulp -g 注意需要在npm全局中安装gulp，否则命令窗口中找不到gulp快捷命令，记得检查环境变量的配置情况。 ##gulp 插件 gulp的使用离不开gulp插件的使用，下面是常用的几款。 npm install del gulp gulp-concat gulp-minify-css gulp-replace gulp-uglify gulp-rev gulp-rev-collector --save-dev del 和 gulp-clean del是node.js的插件，两者的效果相似，都是用来清除文件。至于为什么使用 del，而不是 gulp-clean，我是看到网上一篇文章推荐的。 gulp-concat gulp-concat用来做文件合并，可以将多个文件合并成一个文件，减少静态资源数量。 gulp-minify-css gulp-minify-css是css的压缩工具。 gulp-uglify gulp

使用Glup.JS优化JS、CSS、图片，压缩合并

阅读更多关于使用Glup.JS优化JS、CSS、图片，压缩合并

下面进入正题，简单说一下如何安装，使用gulp 1. 安装Gulp gulp的任务处理机制是，将来源档案当作输入，通过Node.js的Stream操作流，并将流导向gulp的任务处理插件plugins，处理完成后将结果输出到指定输出目录。从gulp的任务处理机制可以看出，gulp相当于一个任务管理器，而实际的业务处理是由其插件完成的。因此，gulp的安装也包括：安装gulp和安装gulp任务插件两部分。 1.1 安装Gulp 安装gulp，你可以选择全局安装或安装在项目的dev开发环境下。全局安装gulp： npm install gulp -g 在项目的dev开发环境中安装： npm install gulp --save-dev 1.2 安装Gulp插件在开发环境安装后，会在项目package.json文件的devDependencies节点下保存。建议对gulp使用全局安装，这样可以在所有项目中使用。全局安装对于非Node.js项目尤为适用。 gulp插件的安装，也可以使用全局安装或安装在dev开发环境，本站比较推荐使用全局安装。gulp插件可以按需安装，如果你只需要处理CSS，那么只安装CSS相关处理插件即可。gulp的所有插件请参考：Gulp插件。对于CSS文件处理、JS文件处理、图片处理，你可能需要以下插件： gulp-ruby-sass

Gulp issues with cario install command not found when trying to installing canvas

阅读更多关于 Gulp issues with cario install command not found when trying to installing canvas

问题 I'm fairly new to working in command line. I have a project that I'm setting up with gulp, and have gulp installed and compiling the sass files successfully. However, I cannot install canvas via: $ npm install canvas I need to install canvas because of the dependencies css-sprite has to run. I am getting the following error. I have installed cairo, quartz, and homebrew installed. I've researched other tickets and tried to run the export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig and install again

gulp - exclude a file when minifying CSS

阅读更多关于 gulp - exclude a file when minifying CSS

问题 Im new to Gulp.. I have been able to successfully install and concatenate and minify my .js and .css files, however, there is one .css file which i want to exclude - print.css Ive followed the instructions here: https://www.npmjs.org/package/gulp-ignore install gulp-ignore in my local directory, and modified my gulpfile.js to: // Include gulp var gulp = require('gulp'); // Include Our Plugins var jshint = require('gulp-jshint'); var concat = require('gulp-concat'); var uglify = require('gulp

Gulp: preserving folder structure on destination for individual files

阅读更多关于 Gulp: preserving folder structure on destination for individual files

问题 Let’s say we have the following folder structure: rootDirectory │ │ ├──a │ ├──a.txt │ ├──b │ ├──a │ ├──a.txt │ ├──c.txt also, let’s say we need to write a Gulp task that will take a.txt in the a folder, and c.txt ; perform some manipulations on them, and then pipe them into the build directory. What I want is for the files copied in the build folder to keep their directory structure in the build folder (and I do not want files that were not supposed to be processed by the task to get in the

How can I concat TypeScript files with Angular2 like Rails assets:precompile?

阅读更多关于 How can I concat TypeScript files with Angular2 like Rails assets:precompile?

问题 How can I concat multiple TypeScript with Angular2 files into single JS file like Rails assets:precompile? For example, in a tutorial of angular2 official page, you see four .ts files: app.component.ts boot.ts hero.ts hero-detail.component.ts and when you look at app.component.ts file, you see the following part: import {Hero} from './hero'; import {HeroDetailComponent} from './hero-detail.component'; It works perfectly when you compile all .ts files separately, but I'd like to concat() them