I'm trying to minify and then create a copy without the "src." part of every index.src.php file inside any folder so I still have index.src.php available but a minified copy index.php:
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename(function(path){
path.basename = path.basename.replace('min\.', '');
}))
.pipe(gulp.dest('.'));
});
... so far this only literally renames the index.src.php into index.php
gulp-rename was easier than expected...
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename({
basename: 'index'
}))
.pipe(gulp.dest('.'));
});
Related
Currently with these lines of code I am minifying my project.
gulp.task('minify-js', function() {
gulp.src('js/*.js')
.pipe($.uglify())
.pipe(gulp.dest('./_build/'));
});
gulp.task('minify-css', function() {
gulp.src(['./css/**/*.css'])
.pipe($.rename({suffix: '.min'}))
.pipe($.minifyCss({keepBreaks:true}))
.pipe(gulp.dest('./css/'))
.pipe(gulp.dest('./_build/css/'));
});
gulp.task('minify-html', function() {
var opts = {
comments: true,
spare: true,
conditionals: true
};
gulp.src('./*.html')
.pipe($.minifyHtml(opts))
.pipe(gulp.dest('./_build/'));
});
gulp.task('fonts', function() {
gulp.src('./fonts/**/*.{ttf,woff,eof,eot,svg}')
.pipe($.changed('./_build/fonts'))
.pipe(gulp.dest('./_build/fonts'));
});
gulp.task('server', function(done) {
return browserSync({
server: {
baseDir: './'
}
}, done);
});
gulp.task('server-build', function(done) {
return browserSync({
server: {
baseDir: './_build/'
}
}, done);
});
gulp.task('clean:build', function (cb) {
del([
'./_build/'
// if we don't want to clean any file we can use negate pattern
//'!dist/mobile/deploy.json'
], cb);
});
require('events').EventEmitter.prototype._maxListeners = 100;
gulp.task('usemin', function() {
return gulp.src('./index.html')
// add templates path
.pipe($.htmlReplace({
'templates': '<script type="text/javascript" src="js/templates.js"></script>'
}))
.pipe($.usemin({
css: [$.minifyCss(), 'concat'],
libs: [$.uglify()],
nonangularlibs: [$.uglify()],
angularlibs: [$.uglify()],
controllers:[$.uglify()],
contservicesapp:[$.uglify()],
services:[$.uglify()],
appcomponents: [$.uglify()],
mainapp: [$.uglify()],
templates:[$.uglify()],
directives:[$.uglify()]
}))
.pipe(gulp.dest('./_build/'));
});
When I minify it, it is inside a folder called "_build". Inside the _build folder I have a file called "cv.pdf". I have added it to this folder because when I minify it is not included. I would like that when the project is minified my file "cv.pdf" is not deleted.
How can I do it?
Try this:
gulp.task('clean:build', function (cb) {
del([
'./_build/**',
'!./_build',
'!./_build/cv.pdf'
], cb);
});
Adapted from del: excluding a file from a directory from deletion. Which explains how to delete an entire directory except for one file. This is probably the easiest way, you could also only specifically include only css, js, html, fonts and images if the above code doesn't work. Let me know.
I'm new in the use of task runners like Gulp or Grunt, I have chosen to use Gulp to automate my tasks because I'm familiar with Javascript language.
I succeeded to compile my .less files to .css, I even wrote a task to minify my .css files.
I would like to run watch task with BrowSync, which automatically compile .less files to .css and .css to .min.css.
Here's my code :
gulp.task('minifyCSS', () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'));});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}));});
gulp.task('watchSync', ['less', 'minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['less']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});});
The browserSync task runs well but it never compiles .css to .min.css. But when I run "gulp minifyCSS" it does the job ...
Do I miss a step ? Can anyone help me on this one ? :)
I'm nearly sure this will work:
gulp.task('minifyCSS', ['less'], () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}))
;
});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
;
});
gulp.task('watchSync', ['minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['minifyCSS']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});
});
I have this task:
gulp.task('js', function() {
var webpackConfig = extend({}, require('./webpack.config.dev.js'), {
devtool: "source-map",
});
return gulp.src(config.paths.mainJs)
//.pipe(beautify({indent: {value: ' '}}))
.pipe(named())
.pipe(webpack(webpackConfig))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(through.obj(function (file, enc, cb) {
// Dont pipe through any source map files as it will be handled
// by gulp-sourcemaps
var isSourceMap = /\.map$/.test(file.path);
if (!isSourceMap) this.push(file);
cb();
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./deployment/deployment/js'))
.pipe(uglify())//JS_Parse_Error
The output of the previous pipe ./deployment/deployment/js/ is two files: bundle.js and bundle.js.map. So I think my pipe to uglify is wrong. How can I minify webpacks output?
All I had to do was modify my './webpack.config.dev.js` file already referenced in gulp to add the UglifyJsPlugin:
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})
],
my app created by generator-gulp-webapp, i load some plugins with bower, and some plugin depend on .swf files, such as zeroclipboard and uploader, and my problem is how to move swf files to * folder when i build this app?
eg:
gulp.task('extras', () => {
return gulp.src([
'app/.',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('extras', () => {
return gulp.src([
'app/*.swf'
], {
dot: true
}).pipe(gulp.dest('dist/scripts'));
});
how to Merger that to one task?
i just add one more task!
gulp.task('swf', () => {
return gulp.src([
'app/scripts/*.swf'
], {
dot: true
}).pipe(gulp.dest('dist/scripts'));
});
done!!!
I am writing a gulp task that goes through several folders and watches for less files. I want to pipe the compiled css back to the same folder the less file came from. Unfortunately, I can't seem to find a good way to give each of the files a separate output folder.
gulp.task('less:watch', function() {
watch({
glob: 'src/**/less/**/*.less',
emit: 'one',
emitOnGlob: false
},function(files){
return files
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
// I need to pipe the files back to the folder they were generated from
.pipe(gulp.dest(path.join(__dirname, 'less')))
.on('error', gutil.log);
});
});
I believe you can process one file at a time with gulp.watch:
gulp.task('less:watch', function() {
gulp.watch('src/**/less/**/*.less',function(evnt) {
return gulp.src(evnt.path)
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest(path.dirname(evnt.path)))
.on('error', gutil.log);
});
});