How to shorten class names in html and in css files
I have this class name
.profile-author-name-upper
And want to change this like this
.p-a-n-u
or
.panu
I'm usinig js task runner GruntJS
So what you need is uglification
This is just part from tutorial I copied online from grunt-contrib-uglify grunt plugin
Simple Configuration
npm install grunt grunt-contrib-uglify --save-dev
This will install grunt as well uglifyjs in your node_modules devDependencies as well as update package.json
Inside your Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/minified.js': ['src/jquery.js', 'src/angular.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); // load the given tasks
grunt.registerTask('default', ['uglify']); // Default grunt tasks maps to grunt
};
From the command line:
*$ grunt
Running "uglify:my_target" (uglify) task
1 file created.
Done, without errors*
Related
I have the following gulp task (please see below), which I'm trying to run to automate the polymer build. However, all I'm seeing in the resulting /build folder is an index.html. No dependencies, and I was under the impression that the resulting file would be called shared-bundle.html. Also, it's not fetching any of my bower dependencies:
const PolymerProject = require('polymer-build').PolymerProject;
const project = new PolymerProject(require('./polymer.json'));
gulp.task('build', () => {
mergeStream(project.sources(), project.dependencies())
.pipe(project.bundler())
.pipe(gulp.dest('./build/'));
});
This is the documentation I was referencing: https://www.npmjs.com/package/polymer-build
Any ideas what I might be missing?
Apparently I was just missing the entrypoint param here:
const project = new PolymerProject({entrypoint: 'my-page.html'});
I'm trying to run gulp to build my app like Rob Dodson explains here.
Original error
At the command line, if I run:
npm run build
I get the following error:
[20:50:55] Using gulpfile ~/path/to/gulpfile.js
[20:50:55] Starting 'default'...
Deleting build/ directory...
[20:50:56] The following tasks did not complete: default
[20:50:56] Did you forget to signal async completion?
It appears there is some task described as "signal async completion?" What does this mean? And how do I do it?
Alternate error
However if I run the following at the command line:
gulp
I get a different error message as follows:
[23:40:57] Using gulpfile ~/path/to/gulpfile.js
/usr/local/lib/node_modules/gulp/bin/gulp.js:129
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:19
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
at Function.Module.runMain (module.js:443:11)
at startup (node.js:139:18)
at node.js:968:3
Why would there be different error messages? Does that give a hint what's actually causing the errors? If so, what is it? And what can I do to fix it?
My code
I just copied the files package.json, polymer.json and gulpfile.js from the sample code Rob supplied here. Then I ran npm install as this answer describes.
gulpfile.js
'use strict';
// Documentation on what goes into PolymerProject.
const path = require('path');
const gulp = require('gulp');
const mergeStream = require('merge-stream');
const del = require('del');
const polymerJsonPath = path.join(process.cwd(), 'polymer.json');
const polymerJSON = require(polymerJsonPath);
const polymer = require('polymer-build');
const polymerProject = new polymer.PolymerProject(polymerJSON);
const buildDirectory = 'build/bundled';
/**
* Waits for the given ReadableStream
*/
function waitFor(stream) {
return new Promise((resolve, reject) => {
stream.on('end', resolve);
stream.on('error', reject);
});
}
function build() {
return new Promise((resolve, reject) => {
// Okay, so first thing we do is clear the build
console.log(`Deleting build/ directory...`);
del([buildDirectory])
.then(_ => {
// Okay, now lets get your source files
let sourcesStream = polymerProject.sources()
// Oh, well do you want to minify stuff? Go for it!
// Here's how splitHtml & gulpif work
.pipe(polymerProject.splitHtml())
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.css$/, cssSlam()))
.pipe(gulpif(/\.html$/, htmlMinifier()))
.pipe(polymerProject.rejoinHtml());
// Okay now lets do the same to your dependencies
let depsStream = polymerProject.dependencies()
.pipe(polymerProject.splitHtml())
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.css$/, cssSlam()))
.pipe(gulpif(/\.html$/, htmlMinifier()))
.pipe(polymerProject.rejoinHtml());
// Okay, now lets merge them into a single build stream.
let buildStream = mergeStream(sourcesStream, depsStream)
.once('data', () => {
console.log('Analyzing build dependencies...');
});
// If you want bundling, do some bundling! Explain why?
buildStream = buildStream.pipe(polymerProject.bundler);
// If you want to add prefetch links, do it! Explain why?
// buildStream = buildStream.pipe(new PrefetchTransform(polymerProject));
// Okay, time to pipe to the build directory
buildStream = buildStream.pipe(gulp.dest(buildDirectory));
// waitFor the buildStream to complete
return waitFor(buildStream);
})
.then(_ => {
// You did it!
console.log('Build complete!');
resolve();
});
});
}
gulp.task('default', build);
The original error is unrelated to the "alternate error".
While the build task runs gulp, npm run prioritizes the locally-installed gulp (at node_modules/.bin/gulp) before the system-installed gulp. Running gulp yourself (without npm run) would invoke the globally-installed gulp, which may result in an error if it's incompatible with your project (e.g., Gulp 3 binary with Gulp 4 API in your scripts, which appears to be the case). You could either install Gulp 4 so that you can run gulp yourself, or continue using npm run build.
To troubleshoot the original error, I recommend starting from the Polycast's original source (if you haven't already) to determine what the difference could be.
If you prefer to stick with your current track, I suggest a few things:
Verify the paths in your HTML imports, as a path to a non-existent file would cause a silent error (polymer-build issue 88). It might be helpful to run polymer build -v (verbose build).
Add buildStream.on('error', (err) => console.log(err)) after let buildStream = ... in case any unsuppressed error events crop up in that stream.
I recommend you use the new version of PSK Custom Build:
https://github.com/PolymerElements/generator-polymer-init-custom-build/
It has the gulpfile.js updated.
The problem was caused by an incorrect import path.
incorrect path
<link rel="import" href="../../../bower_components/polymer/polymer.html">
correct path
<link rel="import" href="../../bower_components/polymer/polymer.html">
As #tony19, correctly described, that errant import path caused a silent failure.
I found this by pursuing the path suggested by #abdonrd. I followed the instructions here as follows.
First, I copied my project. Then I loaded into the my-app directory per the below described procedure.
https://github.com/PolymerElements/generator-polymer-init-custom-build/
npm install -g polymer-cli
npm install -g generator-polymer-init-custom-build
mkdir my-app
cd my-app
polymer init custom-build
polymer build -v # the results of this command highlighted my error in red
The error showed the path of the missing file. Which I noticed was located one level higher than it should have been because the root directory my-app/ was missing from the path. Then I had to search manually through all the files using the search string polymer/polymer.html until I found a mismatch between the number of ../ in the import path (3 in this case) and the number of folders deep into the root directory the importing file was (2 in this case).
After I corrected the file path, I again ran:
polymer build -v # building the project again, correctly this time
polymer serve build/bundled # to test serve the build/bundled version
I have setup and configured by gulp process locally and now I am trying to get it working with Teamcity.
I have already installed node, and the gulp plug in.
One of the gulp packages I am using is gulp-bump so that I can use the %build-number% variable and use it to set the version of my package.json file. I am using yargs so that I can read arguments from the command line
This is the gulp task that I am using
gulp.task('setVersion', function () {
var msg = 'Setting version';
var version = args.version;
var options = {};
if (version) {
options.version = version;
msg += ' to ' + version;
}
log(msg);
return gulp
.src(config.packages)
.pipe($.print())
.pipe(version ? $.bump(options) : $.util.noop())
.pipe(gulp.dest(config.dest.root));
});
To get this to work, from the command line i call
gulp build --version=2.3.4
build is the gulp task that I want to run, and --version is the value i want to read from the command line.
The task setVersion is a dependency of the build task.
There are other gulp tasks that use the package.json file to be included at the op of all .css and js files that are outputted but these are called as part of the build task using the package 'run-sequence'
When I run this from the command line, everything works as expected.
Within my teamcity build I have two steps defined.
Step 1 is Node.js NPM runner, which i can see is correctly pulling down all the relevant packages .
Step 2 is using the Gulp runner.
Within this task, I have set the gulp task as "build", and the additional command line parameters as --version=%build.number%
But it does not appear that the version number is being set correctly as even though in the build log it is saying
"Setting version to 2.3.4"
It is not setting the version correctly as when I review the css and js files after the build, they are not using the correct version.
However I know that teamcity is using %build.number% correctly as the next task is to produce a nuget file using NuGet Pack, and the version is set to %build.number%, and the file name of the nuget file produced does correctly include the version number.
I just cannot get the version within package.json set correctly as part of the build process.
What else can I do to correctly pass in the build number and to correctly set the version of package.json
Update
After the comments received, I have discovered that the error was with the way in which I was reading package.json
My gulpfile.js had the following:
var pkg = require('./package.json');
var banner = ['/**',
' * <%= pkg.name %>',
' * #version v<%= pkg.version %>',
' */',
''].join('\n');
I was using package gulp-header to then insert the banner at the top of the page.
$.header(banner, { pkg: pkg })
Looking at the answer to this question : Javascript: get package.json data in gulpfile.js
it was mentioned that when you use require to load package.json the file is cached, and if any process modifies the package.json file, gulp will not update the version that it has already cached.
So I modified the routine to read the package.json file on demand:
var fs = require('fs');
function getPackageJson() {
return JSON.parse(fs.readFileSync('./package.json'));
}
So in my processes that where appending the header, I changed to call getPackageJson. Now when i run the process in teamcity, it is correctly setting the correct version
e.g.
var pkg = getPackageJson();
return gulp
.src(config.src.sass)
.pipe($.sass())
.pipe($.header(banner, { pkg: pkg }))
just check if below works
update package.json
gulp.task('bump-version', function () {
return gulp.src(['./bower.json', './package.json'])
.pipe(plugins.if(!bumpOpt.type, plugins.prompt.prompt(bumpPrompt, function(res){ bumpOpt.type = res.bump; })))
.pipe(plugins.bump(bumpOpt).on('error', plugins.util.log))
.pipe(gulp.dest('./'));
});
and then read the version using
function getPackageJsonVersion () {
//We parse the json file instead of using require because require caches multiple calls so the version number won't be updated
return JSON.parse(fs.readFileSync('./package.json', 'utf8')).version;
};
and use this function like
gulp.task('create-new-tag', function (cb) {
var version = getPackageJsonVersion();
plugins.git.tag(version, 'Created Tag for version: ' + version, function (error) {
if (error) { return cb(error); }
plugins.git.push('origin', 'master', {args: '--tags'}, cb);
});
});
I am having an issue with my gulp build file with the sass imports.
I am using gulp-importify to create a build.scss file that has the proper order of my dependencies, third party css, and my custom css.
The Importify task
module.exports = function() {
APP.gulp.src(APP.concat.sass)
.pipe(APP.tasks.importify('build.scss', {
cssPreproc: 'scss'
}))
.pipe(APP.gulp.dest('build/sass/'));
};
My folder structure is as follows:
gulp
- bower_components
- build
- sass
- build.scss
- modules
-forms.scss
The build.scss file which contains the imports has the following paths
#import "_bootstrap-sprockets";
#import "variables.scss";
#import "modules/form.scss";
but the bower components are back two directories.
#import "../../bower-components/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets";
#import "variables.scss";
#import "modules/form.scss";
is there any other way or method to setting the full relative/correct import path in Gulp?
I found the solution. I added a base path through gulp.src as follows:
module.exports = function() {
APP.gulp.src(APP.concat.sass,
{base: 'build/sass'})
.pipe(APP.tasks.imports('build/sass/build.scss', {
cssPreproc: 'scss'
}))
.pipe(APP.gulp.dest('.'));
};
You can also use the global process object available in Node to get the current working directory. So you can set the base to:
{base: process.cwd() }
I'm using Gulp and the main-bower-files to bundle my bower dependencies.
I need to ensure that jQuery is included before AngularJS, but since the Angular bower package does not actually depend on jQuery it is included after.
Is there a way to push jQuery to the top of source list or override Angular's dependency so it does require jQuery?
I tried using the gulp-order plugin to do this but it messes up the original order of the remaining files:
gulp.task('bower', function () {
var sources = gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js'])); // don't include min files
return sources
// force jquery to be first
.pipe(plugins.order([
'jquery.js',
'*'
]))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.concat('libs.min.js'))
.pipe(plugins.uglify())
.pipe(plugins.sourcemaps.write('./'))
.pipe(gulp.dest(config.output))
.pipe(plugins.notify({ message: 'Bower task complete' }));
});
You can override angulars dependencies in your project bower.json:
https://github.com/ck86/main-bower-files#overrides-options
{
...
"overrides": {
"angular": {
"dependencies": {
"jquery": "~1.8"
}
}
}
}
I haven't used main-bower-files but one trick I can think of is to just include the jquery file directly and don't load it in the main bower files array, e.g.
var glob = ['/path/to/jquery.js'].concat(mainBowerFiles(['**/*.js', '!/path/to/jquery.js']));
var sources = gulp.src(glob);